205hlab-mirrors/authentik
2
0
Fork 0
mirror of https://github.com/goauthentik/authentik.git synced 2026-06-17 19:09:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

web/elements: P5 Drawer component with all capabilities (#21545)

Browse Source 
* .

* Did I miss something?

* That was a stupid spelling error.

* ## What

Extend ak-drawer to comply with the full specification; port ak-drawer to use Patternfly 5; vendor the Patternfly 5 subsystems directly responsible for the Drawer into the CSS.

## Why

To meet the requirements of the Drawer, of the LightDOM project, and of the Patternfly 5 vendoring port.

## Details

The Drawer’s internal CSS is now entirely within the Lit framework; the controlling CSS is namespaced to `ak-v2-c--drawer` and placed into the global CSS. Every bit of the drawer has a `part` name, so it can be customized to your heart’s content.

Added stylelint to make sure I’m doing this correctly.

* TSC (!) had opinions.

* Re-arranged to avoid having a 'devDependencies' block.

* Nobody liked this choice.

* Extend ak-drawer to comply with the full specification; port ak-drawer to use Patternfly 5; vendor the Patternfly 5 subsystems directly responsible for the Drawer into the CSS.

This drawer is completely independent of Patternfly 4; it brings everything in-house, everything is under `ak-v2-c-drawer`, and we read our variables from `ak-v2-global` entries as part of the style folder.

The contents of the folder are slotted, so they’re part of the parent DOM and parent CSS context, and can be controlled from there without having to do any magic on the Drawer.

To comply with the standards of the HTML disclosure pattern, the drawer uses `expanded` instead of `open`; it listens for an event to trigger open/close; it emits a `toggle` event when completed. Shortcoming: to completely comply with the disclosure pattern, it should emit a `beforeToggle` to let other clients intercept the request and prevent it from happening, but we don’t do that yet.

Unlike the previous drawer, this one has `resizable`, `position`, `inline/static`, and responsive width breakpoints, all features of the Patternfly 5 React web-component. The resizable variant gives you a visible handle, and even responds to keyborad controls.

Along with the native control through CSS Custom Properties, every part of the component has a `part` declaration, so if you *really* want to customize the thing that’s now possible.

Unlike the Patternfly 5 React version, we impose **no** structure on the internals of the component; no padding, no margin, no header/main/footer segmentation. That pattern is universal, and doesn’t need to be specified for each and every component. If you need that, build it into whatever element you put into the unnamed “main” or `panel` slots.

There is a comprehensive Storybook story page for the component.

To meet the requirements of the Drawer, of the LightDOM project, and of the Patternfly 5 vendoring port.

* Prettier has opinions, as usual.

* UV lockfile update required.

* Restoring from main.

* Merge screwed up the library resolveds again.

* A hail-mary pass.

* Still trying to get this past lint.
This commit is contained in:
Ken Sternberg
2026-05-12 10:47:23 -07:00
committed by GitHub
parent 31d8ddc887
commit 349a97b1df
14 changed files with 2477 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/package-lock.json
Generated
+880 -18
View File
File diff suppressed because it is too large Load Diff
web/package.json
+1
View File
@@ -184,6 +184,7 @@
"remark-mdx-frontmatter": "^5.2.0",
"storybook": "^10.2.1",
"style-mod": "^4.1.3",
"stylelint": "^17.11.0",
"trusted-types": "^2.0.0",
"ts-pattern": "^5.9.0",
"turnstile-types": "^1.2.3",
web/src/elements/ak-drawer/ak-drawer.component.ts
+80 -17
View File
@@ -1,32 +1,73 @@
import Style from "./ak-drawer.css";
import AKDrawer from "./ak-drawer.styles";
import { DrawerResizeController } from "./drawerResizeController";
import { AKElement } from "#elements/Base";
import { classList } from "#elements/directives/class-list";
import { html } from "lit";
import { html, LitElement, nothing, PropertyValues } from "lit";
import { property } from "lit/decorators.js";
import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
export class DrawerExpandRequest extends Event {
static readonly eventName = "ak-drawer-expand-request";
expanded: boolean | null = null;
export class Drawer extends AKElement {
static readonly styles = [PFDrawer, Style];
constructor(expanded: boolean | null = null) {
super(DrawerExpandRequest.eventName, { bubbles: true, composed: true });
this.expanded = expanded;
}
}
export class AkDrawer extends LitElement {
static readonly styles = [AKDrawer];
@property({ type: Boolean })
public resizable = false;
@property({ type: Boolean, reflect: true })
public open = false;
public expanded = false;
render() {
const open = [(this.open && "pf-m-expanded") || "pf-m-collapsed"];
@property({ type: Boolean, reflect: true })
public resizing = false;
@property({ type: String, reflect: true })
public width = "33";
private resize = new DrawerResizeController(this);
onDrawerRequest = (ev: DrawerExpandRequest) => {
ev.stopPropagation();
this.expanded = ev.expanded === null ? !this.expanded : ev.expanded;
};
constructor() {
super();
this.addEventListener(DrawerExpandRequest.eventName, this.onDrawerRequest);
}
public override render() {
return html`
<div class="pf-c-page__drawer">
<div class="pf-c-drawer ${classList(open)}" id="flow-drawer">
<div class="pf-c-drawer__main">
<div class="pf-c-drawer__content">
<div class="pf-c-drawer__body">
<div class="ak-v2-c-drawer" part="drawer">
<div class="ak-v2-c-drawer__main" part="drawer-main">
<div class="ak-v2-c-drawer__content" part="drawer-content">
<div class="ak-v2-c-drawer__body" part="drawer-body">
<slot></slot>
</div>
</div>
<div class="pf-c-drawer__panel pf-m-width-33">
<div class="ak-v2-c-drawer__panel" part="drawer-panel">
${this.resizable
? html` <div
class="ak-v2-c-drawer__splitter"
part="drawer-splitter"
@mousedown=${this.resize.handleMouseDown}
@keydown=${this.resize.handleKeyDown}
@touchstart=${this.resize.handleTouchStart}
role="separator"
tabindex="0"
>
<div
class="ak-v2-c-drawer__splitter-handle"
aria-hidden="true"
></div>
</div>`
: nothing}
<div class="ak-v2-c-drawer__panel-main" part="drawer-panel-main">
<slot name="panel"></slot>
</div>
</div>
@@ -34,4 +75,26 @@ export class Drawer extends AKElement {
</div>
`;
}
public override updated(changed: PropertyValues<this>) {
super.updated(changed);
// Simulate the behavior of summary/details, another disclosure pattern.
const expanded = changed.get("expanded");
if (expanded !== undefined) {
const expandedMsg = (i: boolean) => (i ? "open" : "closed");
this.dispatchEvent(
new ToggleEvent("toggle", {
newState: expandedMsg(this.expanded),
oldState: expandedMsg(expanded),
}),
);
}
}
}
declare global {
interface GlobalEventHandlersEventMap {
[DrawerExpandRequest.eventName]: DrawerExpandRequest;
}
}
web/src/elements/ak-drawer/ak-drawer.css
-40
View File
@@ -1,40 +0,0 @@
slot {
display: content;
}
[data-theme="dark"] {
--pf-c-drawer__panel--BackgroundColor: var(--ak-dark-background);
}
.pf-c-drawer {
/* TODO: Revisit this after native <dialog> modals are implemented. */
--pf-c-drawer__content--ZIndex: auto;
}
.pf-c-drawer__body {
display: flex;
flex-flow: column;
}
.pf-c-drawer__content {
--pf-c-drawer__content--BackgroundColor: transparent;
}
.pf-c-drawer {
.pf-c-drawer__panel {
background-color: var(--pf-c-drawer__panel--BackgroundColor);
transition-behavior: allow-discrete;
gap: var(--pf-global--spacer--sm);
@media (width > 768px) {
flex-flow: row;
.pf-c-drawer__panel_content {
flex: 1 1 auto;
max-width: 33dvw;
}
}
}
}
web/src/elements/ak-drawer/ak-drawer.root.css
+141
View File
@@ -0,0 +1,141 @@
/* ----------- CSS Custom Properties for DRAWER --------------------------- */
:root {
--ak-v2-c-drawer__content--FlexBasis: 100%;
--ak-v2-c-drawer__content--BackgroundColor: var(--ak-v2-global--ContentSurface);
--ak-v2-c-drawer__content--ZIndex: var(--ak-v2-global--ZIndex--xs, auto);
--ak-v2-c-drawer__panel--MinWidth: 50%;
--ak-v2-c-drawer__panel--MaxHeight: auto;
--ak-v2-c-drawer__panel--ZIndex: var(--ak-v2-global--ZIndex--sm);
--ak-v2-c-drawer__panel--BackgroundColor: var(--ak-v2-global--ContentSurface);
--ak-v2-c-drawer__panel--TransitionDuration: var(--ak-v2-global--TransitionDuration);
--ak-v2-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
--ak-v2-c-drawer__panel--FlexBasis: 100%;
--ak-v2-c-drawer__panel--md--FlexBasis--min: 1.5rem;
--ak-v2-c-drawer__panel--md--FlexBasis: 50%;
--ak-v2-c-drawer__panel--md--FlexBasis--max: 100%;
--ak-v2-c-drawer__panel--xl--MinWidth: 28.125rem;
--ak-v2-c-drawer__panel--xl--FlexBasis: 28.125rem;
--ak-v2-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
--ak-v2-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
--ak-v2-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
--ak-v2-c-drawer__panel--m-resizable--FlexDirection: row;
--ak-v2-c-drawer__panel--m-resizable--md--FlexBasis--min: var(
--ak-v2-c-drawer__splitter--m-vertical--Width
);
--ak-v2-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
--ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
--ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
--ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
--ak-v2-c-drawer__splitter--Height: 0.5625rem;
--ak-v2-c-drawer__splitter--Width: 100%;
--ak-v2-c-drawer__splitter--BackgroundColor: var(--ak-v2-global--ContentSurface);
--ak-v2-c-drawer__splitter--Cursor: row-resize;
--ak-v2-c-drawer__splitter--m-vertical--Height: 100%;
--ak-v2-c-drawer__splitter--m-vertical--Width: 0.5625rem;
--ak-v2-c-drawer__splitter--m-vertical--Cursor: col-resize;
--ak-v2-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
--ak-v2-c-drawer__splitter--after--BorderColor: var(--ak-v2-global--BorderColor--100);
--ak-v2-c-drawer__splitter--after--border-width--base: var(--ak-v2-global--BorderWidth--sm);
--ak-v2-c-drawer__splitter--after--BorderTopWidth: 0;
--ak-v2-c-drawer__splitter--after--BorderRightWidth: var(
--ak-v2-c-drawer__splitter--after--border-width--base
);
--ak-v2-c-drawer__splitter--after--BorderBottomWidth: 0;
--ak-v2-c-drawer__splitter--after--BorderLeftWidth: 0;
--ak-v2-c-drawer--m-panel-left__splitter--after--BorderLeftWidth: var(
--ak-v2-c-drawer__splitter--after--border-width--base
);
--ak-v2-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth: var(
--ak-v2-c-drawer__splitter--after--border-width--base
);
--ak-v2-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
--ak-v2-c-drawer--m-inline__splitter-handle--Left: 50%;
--ak-v2-c-drawer--m-inline__splitter--after--BorderRightWidth: var(
--ak-v2-c-drawer__splitter--after--border-width--base
);
--ak-v2-c-drawer--m-inline__splitter--after--BorderLeftWidth: var(
--ak-v2-c-drawer__splitter--after--border-width--base
);
--ak-v2-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
--ak-v2-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
--ak-v2-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(
--ak-v2-c-drawer__splitter--after--border-width--base
);
--ak-v2-c-drawer__splitter-handle--Top: 50%;
--ak-v2-c-drawer__splitter-handle--Left: calc(
50% - var(--ak-v2-c-drawer__splitter--after--border-width--base)
);
--ak-v2-c-drawer--m-panel-left__splitter-handle--Left: 50%;
--ak-v2-c-drawer--m-panel-bottom__splitter-handle--Top: calc(
50% - var(--ak-v2-c-drawer__splitter--after--border-width--base)
);
--ak-v2-c-drawer__splitter-handle--after--BorderColor: var(--ak-v2-global--Color--200);
--ak-v2-c-drawer__splitter-handle--after--BorderTopWidth: var(--ak-v2-global--BorderWidth--sm);
--ak-v2-c-drawer__splitter-handle--after--BorderRightWidth: 0;
--ak-v2-c-drawer__splitter-handle--after--BorderBottomWidth: var(
--ak-v2-global--BorderWidth--sm
);
--ak-v2-c-drawer__splitter-handle--after--BorderLeftWidth: 0;
--ak-v2-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(
--ak-v2-global--Color--100
);
--ak-v2-c-drawer__splitter--focus__splitter-handle--after--BorderColor: var(
--ak-v2-global--Color--100
);
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(
--ak-v2-global--BorderWidth--sm
);
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(
--ak-v2-global--BorderWidth--sm
);
--ak-v2-c-drawer__splitter-handle--after--Width: 0.75rem;
--ak-v2-c-drawer__splitter-handle--after--Height: 0.25rem;
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
}
@media screen and (min-width: 1200px) {
:root {
--ak-v2-c-drawer__panel--MinWidth: var(--ak-v2-c-drawer__panel--xl--MinWidth);
}
}
:root {
--ak-v2-c-drawer__panel--BoxShadow: none;
--ak-v2-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(
--ak-v2-global--BoxShadow--lg-top
);
--ak-v2-c-drawer--m-expanded__panel--BoxShadow: var(--ak-v2-global--BoxShadow--lg-left);
}
:root {
--ak-v2-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(
--ak-v2-global--BoxShadow--lg-right
);
}
:root {
--ak-v2-c-drawer__panel--after--Width: var(--ak-v2-global--BorderWidth--sm);
--ak-v2-c-drawer--m-panel-bottom__panel--after--Height: var(--ak-v2-global--BorderWidth--sm);
--ak-v2-c-drawer__panel--after--BackgroundColor: transparent;
--ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(
--ak-v2-global--BorderColor--100
);
--ak-v2-c-drawer--m-inline__panel--PaddingLeft: var(--ak-v2-c-drawer__panel--after--Width);
--ak-v2-c-drawer--m-panel-left--m-inline__panel--PaddingRight: var(
--ak-v2-c-drawer__panel--after--Width
);
--ak-v2-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop: var(
--ak-v2-c-drawer__panel--after--Width
);
}
html[data-theme="dark"],
.ak-t-dark,
.pf-t-dark {
--ak-v2-c-drawer__panel--BackgroundColor: var(--ak-v2-global--ContentSurface);
--ak-v2-c-drawer__splitter--BackgroundColor: transparent;
}
web/src/elements/ak-drawer/ak-drawer.stories.ts
+151
View File
@@ -0,0 +1,151 @@
import "./ak-drawer";
import { DrawerExpandRequest } from "./ak-drawer.component";
import type { Meta, StoryObj } from "@storybook/web-components-vite";
import { html, TemplateResult } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
const toggle = (e: Event) => {
const button = e.target as HTMLButtonElement;
button.dispatchEvent(new DrawerExpandRequest());
};
const contentBlock = html`
<div style="padding: 1rem;">
<h2>Main Content</h2>
<p><button @click=${toggle}>Toggle Drawer</button></p>
<p>
This is the drawer's main: fill it by inserting slotted content without a slot name.
This is the part that stays visible most of the time.
</p>
<p>
Macaroon lollipop croissant sweet biscuit croissant chocolate cake. Cake cake pastry
soufflé pudding. Tiramisu lollipop chocolate cake toffee oat cake muffin topping tootsie
roll. Carrot cake bonbon chupa chups sugar plum fruitcake. Brownie sweet halvah oat cake
cheesecake topping chocolate. Wafer macaroon topping lollipop powder cupcake sugar plum
donut. Muffin wafer icing danish jelly-o bonbon. Powder shortbread brownie caramels
tootsie roll dragée liquorice. Cake lemon drops powder danish toffee.
</p>
</div>
`;
const panelBlock = html`
<style>
[slot="panel"] {
padding: 1rem;
background-color: var(--pf-v5-global--BackgroundColor--200, #f0f0f0);
}
</style>
<div slot="panel">
<h3>Panel Content</h3>
<p>This is the side panel. This is where you put the secondary information.</p>
<ul>
<li>
Seasonal, steamed, con panna and rich ut aged cup decaffeinated single origin con
panna bar
</li>
<li>Skinny mazagran whipped, black iced beans carajillo eu cream</li>
<li>Americano pumpkin spice milk ristretto caffeine single shot</li>
</ul>
<p><button @click=${toggle}>Toggle Drawer</button></p>
</div>
`;
interface DrawerProps {
expanded?: boolean;
inline?: boolean;
static?: boolean;
resizable?: boolean;
width?: string;
position?: string;
content?: TemplateResult;
panel?: TemplateResult;
}
const meta = {
title: "Components/Drawer",
component: "ak-drawer",
tags: ["autodocs"],
decorators: [
(story) =>
html`<div style="min-height: 400px; border: 1px solid #d2d2d2; overflow: hidden;">
${story()}
</div>`,
],
argTypes: {
expanded: { control: "boolean" },
position: {
control: { type: "select" },
options: ["right", "left", "bottom"],
},
inline: { control: "boolean" },
static: { control: "boolean" },
resizable: { control: "boolean" },
width: {
control: { type: "select" },
options: ["25", "33", "50", "66", "75", "100"],
},
},
} satisfies Meta;
export default meta;
type Story = StoryObj;
const Template: Story = {
args: {
expanded: false,
inline: false,
static: false,
resizable: false,
width: undefined,
position: undefined,
content: contentBlock,
panel: panelBlock,
},
render: (args) => {
return html` <ak-drawer
?expanded=${args.expanded}
?inline=${args.inline}
?resizable=${args.resizable}
position=${ifDefined(args.position)}
width=${ifDefined(args.width)}
>
${args.content} ${args.panel}
</ak-drawer>`;
},
};
export const Default: Story = {
render: () => html` <ak-drawer> ${contentBlock} ${panelBlock} </ak-drawer> `,
};
export const story = (args: DrawerProps = {}, name?: string): Story => ({
...Template,
...(name ? { name } : {}),
args: {
...Template.args,
...args,
},
});
export const Expanded: Story = story({ expanded: true });
export const PanelLeft: Story = story({ expanded: true, position: "left" });
export const PanelBottom = story({ expanded: true, position: "bottom" });
export const Inline = story({ expanded: true, inline: true });
export const Static = story({ expanded: true, static: true });
export const Resizable = story({ expanded: true, resizable: true });
export const ResizableLeft = story({ expanded: true, resizable: true, position: "left" });
export const ResizableBottom = story({ expanded: true, resizable: true, position: "bottom" });
export const CustomWidth = story({ expanded: true, width: "33" });
export const ResponsiveWidth = story({ expanded: true, width: "75-on-xl" });
web/src/elements/ak-drawer/ak-drawer.styles.ts
+914
View File
@@ -0,0 +1,914 @@
import { css } from "lit";
export const styles = css`
:host {
display: flex;
flex-direction: column;
height: 100%;
}
.ak-v2-c-drawer {
display: flex;
flex-direction: column;
height: 100%;
overflow-x: hidden;
}
:host([position="bottom"]) .ak-v2-c-drawer {
overflow-x: auto;
overflow-y: hidden;
}
slot {
display: contents;
}
:host([inline]:not([no-border])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
:host([inline]:not([resizable])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
:host([static]:not([no-border])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
:host([static]:not([resizable])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
padding-inline-start: var(--ak-v2-c-drawer--m-inline__panel--PaddingLeft);
}
:host([position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
order: 0;
margin-inline-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateX(-100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([position="left"])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
order: 1;
}
:host([position="bottom"]) .ak-v2-c-drawer__main {
flex-direction: column;
}
:host(:not([inline], [static])) .ak-v2-c-drawer__main {
position: relative;
}
:host(:not([inline], [static])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
position: absolute;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-end: 0;
max-width: var(--ak-v2-c-drawer__panel--FlexBasis);
transform: translateX(100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host(:not([inline], [static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([expanded]:not([inline], [static])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
:host([position="left"]:not([inline], [static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
inset-inline-end: auto;
inset-inline-start: 0;
transform: translateX(-100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([position="left"]:not([inline], [static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([expanded][position="left"]:not([inline], [static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(0);
}
:host([position="bottom"]:not([inline], [static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
inset-inline-end: 0;
inset-inline-start: 0;
inset-block-start: auto;
inset-block-end: 0;
max-width: none;
max-height: var(--ak-v2-c-drawer__panel--FlexBasis);
transform: translateY(100%);
}
:host([position="bottom"][expanded]:not([inline], [static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateY(0);
}
:host([class*="pf-m-resizing"]) {
--ak-v2-c-drawer__panel--TransitionProperty: none;
pointer-events: none;
}
:host([class*="pf-m-resizing"]) .ak-v2-c-drawer__splitter {
pointer-events: auto;
}
.ak-v2-c-drawer__main {
display: flex;
flex: 1;
overflow: hidden;
}
.ak-v2-c-drawer__content,
.ak-v2-c-drawer__panel,
.ak-v2-c-drawer__panel-main {
display: flex;
flex-direction: column;
flex-shrink: 0;
overflow: auto;
--ak-v2-c-drawer__content--BackgroundColor: transparent;
}
.ak-v2-c-drawer__content {
z-index: var(--ak-v2-c-drawer__content--ZIndex);
flex-basis: var(--ak-v2-c-drawer__content--FlexBasis);
order: 0;
background-color: var(--ak-v2-c-drawer__content--BackgroundColor);
}
.ak-v2-c-drawer__panel {
position: relative;
z-index: var(--ak-v2-c-drawer__panel--ZIndex);
flex-basis: var(--ak-v2-c-drawer__panel--FlexBasis);
order: 1;
max-height: var(--ak-v2-c-drawer__panel--MaxHeight);
gap: var(--ak-v2-global--spacer--sm);
overflow: auto;
background-color: var(--ak-v2-c-drawer__panel--BackgroundColor);
box-shadow: var(--ak-v2-c-drawer__panel--BoxShadow);
transition-duration: var(--ak-v2-c-drawer__panel--TransitionDuration);
transition-property: var(--ak-v2-c-drawer__panel--TransitionProperty);
transition-behavior: allow-discrete;
-webkit-overflow-scrolling: touch;
}
.ak-v2-c-drawer__panel::after {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: var(--ak-v2-c-drawer__panel--after--Width);
height: 100%;
content: "";
background-color: var(--ak-v2-c-drawer__panel--after--BackgroundColor);
}
@media screen and (min-width: 768px) {
.ak-v2-c-drawer__panel {
--ak-v2-c-drawer__panel--FlexBasis: max(
var(--ak-v2-c-drawer__panel--md--FlexBasis--min),
min(
var(--ak-v2-c-drawer__panel--md--FlexBasis),
var(--ak-v2-c-drawer__panel--md--FlexBasis--max)
)
);
}
}
@media screen and (min-width: 1200px) {
:host(:not([width])) .ak-v2-c-drawer__panel {
--ak-v2-c-drawer__panel--md--FlexBasis: var(--ak-v2-c-drawer__panel--xl--FlexBasis);
}
}
@media screen and (min-width: 1200px) {
:host([position="bottom"]) .ak-v2-c-drawer__panel {
--ak-v2-c-drawer__panel--md--FlexBasis: var(
--ak-v2-c-drawer--m-panel-bottom__panel--xl--FlexBasis
);
}
}
:where(
:host(:not([position])),
:host([position="left"]),
:host([position="right"]),
:host([position="start"]),
:host([position="end"])
)
.ak-v2-c-drawer__splitter {
--ak-v2-c-drawer__splitter--Height: var(--ak-v2-c-drawer__splitter--m-vertical--Height);
--ak-v2-c-drawer__splitter--Width: var(--ak-v2-c-drawer__splitter--m-vertical--Width);
--ak-v2-c-drawer__splitter--Cursor: var(--ak-v2-c-drawer__splitter--m-vertical--Cursor);
--ak-v2-c-drawer__splitter-handle--after--Width: var(
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--Width
);
--ak-v2-c-drawer__splitter-handle--after--Height: var(
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--Height
);
--ak-v2-c-drawer__splitter-handle--after--BorderTopWidth: var(
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth
);
--ak-v2-c-drawer__splitter-handle--after--BorderRightWidth: var(
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth
);
--ak-v2-c-drawer__splitter-handle--after--BorderBottomWidth: var(
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth
);
--ak-v2-c-drawer__splitter-handle--after--BorderLeftWidth: var(
--ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth
);
}
.ak-v2-c-drawer__splitter {
position: relative;
display: none;
width: var(--ak-v2-c-drawer__splitter--Width);
height: var(--ak-v2-c-drawer__splitter--Height);
cursor: var(--ak-v2-c-drawer__splitter--Cursor);
background-color: var(--ak-v2-c-drawer__splitter--BackgroundColor);
}
.ak-v2-c-drawer__splitter:hover {
--ak-v2-c-drawer__splitter-handle--after--BorderColor: var(
--ak-v2-c-drawer__splitter--hover__splitter-handle--after--BorderColor
);
}
.ak-v2-c-drawer__splitter:focus {
--ak-v2-c-drawer__splitter-handle--after--BorderColor: var(
--ak-v2-c-drawer__splitter--focus__splitter-handle--after--BorderColor
);
}
.ak-v2-c-drawer__splitter::after {
position: absolute;
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
content: "";
border: solid var(--ak-v2-c-drawer__splitter--after--BorderColor);
border-block-start-width: var(--ak-v2-c-drawer__splitter--after--BorderTopWidth);
border-block-end-width: var(--ak-v2-c-drawer__splitter--after--BorderBottomWidth);
border-inline-start-width: var(--ak-v2-c-drawer__splitter--after--BorderLeftWidth);
border-inline-end-width: var(--ak-v2-c-drawer__splitter--after--BorderRightWidth);
}
.ak-v2-c-drawer__splitter-handle {
position: absolute;
inset-block-start: var(--ak-v2-c-drawer__splitter-handle--Top);
inset-inline-start: var(--ak-v2-c-drawer__splitter-handle--Left);
transform: translate(-50%, -50%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"]) .ak-v2-c-drawer__splitter-handle {
transform: translate(calc(-50% * var(--ak-v2-global--inverse--multiplier)), -50%);
}
.ak-v2-c-drawer__splitter-handle::after {
display: block;
width: var(--ak-v2-c-drawer__splitter-handle--after--Width);
height: var(--ak-v2-c-drawer__splitter-handle--after--Height);
content: "";
border-color: var(--ak-v2-c-drawer__splitter-handle--after--BorderColor);
border-style: solid;
border-block-start-width: var(--ak-v2-c-drawer__splitter-handle--after--BorderTopWidth);
border-block-end-width: var(--ak-v2-c-drawer__splitter-handle--after--BorderBottomWidth);
border-inline-start-width: var(--ak-v2-c-drawer__splitter-handle--after--BorderLeftWidth);
border-inline-end-width: var(--ak-v2-c-drawer__splitter-handle--after--BorderRightWidth);
}
@media screen and (min-width: 768px) {
:host {
min-width: var(--ak-v2-c-drawer__panel--MinWidth);
}
:host([expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
box-shadow: var(--ak-v2-c-drawer--m-expanded__panel--BoxShadow);
}
:host([expanded][resizable]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
--ak-v2-c-drawer__panel--md--FlexBasis--min: var(
--ak-v2-c-drawer__panel--m-resizable--md--FlexBasis--min
);
flex-direction: var(--ak-v2-c-drawer__panel--m-resizable--FlexDirection);
min-width: var(--ak-v2-c-drawer__panel--m-resizable--MinWidth);
}
:host([expanded][resizable]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel::after {
width: 0;
height: 0;
}
:host([expanded][resizable])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel
> .ak-v2-c-drawer__splitter {
flex-shrink: 0;
}
:host([expanded][resizable])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel
> .ak-v2-c-drawer__panel-main {
flex-shrink: 1;
}
:host([position="left"]) {
--ak-v2-c-drawer--m-expanded__panel--BoxShadow: var(
--ak-v2-c-drawer--m-expanded--m-panel-left__panel--BoxShadow
);
}
:host([position="left"][inline])
> .ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable),
:host([position="left"][static])
> .ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
padding-inline-start: 0;
padding-inline-end: var(--ak-v2-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
}
:host([position="left"][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
:host([position="left"][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel::after {
inset-inline-start: auto;
inset-inline-end: 0;
}
:host([position="left"][expanded][resizable])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel
> .ak-v2-c-drawer__splitter {
--ak-v2-c-drawer__splitter-handle--Left: var(
--ak-v2-c-drawer--m-panel-left__splitter-handle--Left
);
--ak-v2-c-drawer__splitter--after--BorderRightWidth: 0;
--ak-v2-c-drawer__splitter--after--BorderLeftWidth: var(
--ak-v2-c-drawer--m-panel-left__splitter--after--BorderLeftWidth
);
order: 1;
}
:host([position="bottom"]) {
--ak-v2-c-drawer--m-expanded__panel--BoxShadow: var(
--ak-v2-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow
);
--ak-v2-c-drawer__panel--MaxHeight: 100%;
--ak-v2-c-drawer__panel--FlexBasis--min: var(
--ak-v2-c-drawer--m-panel-bottom__panel--FlexBasis--min
);
min-width: auto;
min-height: var(--ak-v2-c-drawer--m-panel-bottom__panel--md--MinHeight);
}
:host([position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel::after {
inset-block-start: 0;
inset-inline-start: auto;
width: 100%;
height: var(--ak-v2-c-drawer--m-panel-bottom__panel--after--Height);
}
:host([position="bottom"][resizable]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
--ak-v2-c-drawer__panel--md--FlexBasis--min: var(
--ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min
);
--ak-v2-c-drawer__panel--m-resizable--FlexDirection: var(
--ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection
);
--ak-v2-c-drawer__panel--m-resizable--MinWidth: 0;
min-height: var(--ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight);
}
:host([position="bottom"][resizable])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel
> .ak-v2-c-drawer__splitter {
--ak-v2-c-drawer__splitter-handle--Top: var(
--ak-v2-c-drawer--m-panel-bottom__splitter-handle--Top
);
--ak-v2-c-drawer__splitter--after--BorderRightWidth: 0;
--ak-v2-c-drawer__splitter--after--BorderBottomWidth: var(
--ak-v2-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth
);
}
:host([position="left"][inline]:not([no-border], [resizable]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable),
:host([position="left"][static]:not([no-border], [resizable]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
padding-inline-start: 0;
padding-inline-end: var(--ak-v2-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
}
:host([inline][resizable])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel
> .ak-v2-c-drawer__splitter {
--ak-v2-c-drawer__splitter--m-vertical--Width: var(
--ak-v2-c-drawer--m-inline__splitter--m-vertical--Width
);
--ak-v2-c-drawer__splitter-handle--Left: var(
--ak-v2-c-drawer--m-inline__splitter-handle--Left
);
--ak-v2-c-drawer__splitter--after--BorderRightWidth: var(
--ak-v2-c-drawer--m-inline__splitter--after--BorderRightWidth
);
--ak-v2-c-drawer__splitter--after--BorderLeftWidth: var(
--ak-v2-c-drawer--m-inline__splitter--after--BorderLeftWidth
);
outline-offset: var(--ak-v2-c-drawer--m-inline__splitter--focus--OutlineOffset);
}
:host([position="bottom"][inline][resizable])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel
> .ak-v2-c-drawer__splitter {
--ak-v2-c-drawer__splitter--Height: var(
--ak-v2-c-drawer--m-inline--m-panel-bottom__splitter--Height
);
--ak-v2-c-drawer__splitter-handle--Top: var(
--ak-v2-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top
);
--ak-v2-c-drawer__splitter--after--BorderTopWidth: var(
--ak-v2-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth
);
--ak-v2-c-drawer__splitter--after--BorderRightWidth: 0;
--ak-v2-c-drawer__splitter--after--BorderLeftWidth: 0;
}
:host([no-panel-border]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
--ak-v2-c-drawer--m-expanded__panel--BoxShadow: none;
}
.ak-v2-c-drawer__splitter {
display: block;
}
}
@media (min-width: 768px) {
:host([width="25"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 25%;
}
:host([width="33"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 33%;
}
:host([width="50"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 50%;
}
:host([width="66"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 66%;
}
:host([width="75"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 75%;
}
:host([width="100"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 100%;
}
}
@media (min-width: 992px) {
:host([width="25-on-lg"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 25%;
}
:host([width="33-on-lg"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 33%;
}
:host([width="50-on-lg"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 50%;
}
:host([width="66-on-lg"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 66%;
}
:host([width="75-on-lg"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 75%;
}
:host([width="100-on-lg"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 100%;
}
}
@media (min-width: 1200px) {
:host([width="25-on-xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 25%;
}
:host([width="33-on-xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 33%;
}
:host([width="50-on-xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 50%;
}
:host([width="66-on-xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 66%;
}
:host([width="75-on-xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 75%;
}
:host([width="100-on-xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 100%;
}
}
@media (min-width: 1450px) {
:host([width="25-on-2xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 25%;
}
:host([width="33-on-2xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 33%;
}
:host([width="50-on-2xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 50%;
}
:host([width="66-on-2xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 66%;
}
:host([width="75-on-2xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 75%;
}
:host([width="100-on-2xl"]) {
--ak-v2-c-drawer__panel--md--FlexBasis: 100%;
}
}
@media (min-width: 768px) {
:host([inline]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content,
:host([static]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
flex-shrink: 1;
}
:host([inline]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
:host([static]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
--ak-v2-c-drawer--m-expanded__panel--BoxShadow: none;
}
:host([inline]:not([no-border])),
:host([static]:not([no-border])) {
background-color: var(
--ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor
);
}
}
:host([inline]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
overflow-x: auto;
}
:host([inline]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateX(100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([inline])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([inline][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: 0;
transform: translateX(0);
}
:host([inline][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: 0;
margin-inline-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateX(-100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([inline][position="left"])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([inline][position="left"][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-end: 0;
transform: translateX(0);
}
:host([inline][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-block-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateY(100%);
}
:host([inline][expanded][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-block-end: 0;
transform: translateY(0);
}
:host([static]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
:host([static][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-end: 0;
transform: translateX(0);
}
:host([static][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
@media (min-width: 992px) {
:host([inline-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content,
:host([static-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
flex-shrink: 1;
}
:host([inline-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
:host([static-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
--ak-v2-c-drawer--m-expanded__panel--BoxShadow: none;
}
:host([inline-on-lg]:not([no-border])),
:host([static-on-lg]:not([no-border])) {
background-color: var(
--ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor
);
}
}
:host([inline-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
overflow-x: auto;
}
:host([inline-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateX(100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([inline-on-lg])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([inline-on-lg][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: 0;
transform: translateX(0);
}
:host([inline-on-lg][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: 0;
margin-inline-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateX(-100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([inline-on-lg][position="left"])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([inline-on-lg][position="left"][expanded])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
margin-inline-end: 0;
transform: translateX(0);
}
:host([inline-on-lg][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-block-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateY(100%);
}
:host([inline-on-lg][expanded][position="bottom"])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
margin-block-end: 0;
transform: translateY(0);
}
:host([static-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
:host([static-on-lg][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-end: 0;
transform: translateX(0);
}
:host([static-on-lg][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
@media (min-width: 1200px) {
:host([inline-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content,
:host([static-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
flex-shrink: 1;
}
:host([inline-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
:host([static-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
--ak-v2-c-drawer--m-expanded__panel--BoxShadow: none;
}
:host([inline-on-xl]:not([no-border])),
:host([static-on-xl]:not([no-border])) {
background-color: var(
--ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor
);
}
}
:host([inline-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
overflow-x: auto;
}
:host([inline-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateX(100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([inline-on-xl])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([inline-on-xl][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: 0;
transform: translateX(0);
}
:host([inline-on-xl][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: 0;
margin-inline-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateX(-100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([inline-on-xl][position="left"])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([inline-on-xl][position="left"][expanded])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
margin-inline-end: 0;
transform: translateX(0);
}
:host([inline-on-xl][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-block-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateY(100%);
}
:host([inline-on-xl][expanded][position="bottom"])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
margin-block-end: 0;
transform: translateY(0);
}
:host([static-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
:host([static-on-xl][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-end: 0;
transform: translateX(0);
}
:host([static-on-xl][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
@media (min-width: 1450px) {
:host([inline-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content,
:host([static-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
flex-shrink: 1;
}
:host([inline-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
:host([static-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
--ak-v2-c-drawer--m-expanded__panel--BoxShadow: none;
}
:host([inline-on-2xl]:not([no-border])),
:host([static-on-2xl]:not([no-border])) {
background-color: var(
--ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor
);
}
}
:host([inline-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
overflow-x: auto;
}
:host([inline-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateX(100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([inline-on-2xl])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([inline-on-2xl][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: 0;
transform: translateX(0);
}
:host([inline-on-2xl][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-start: 0;
margin-inline-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateX(-100%);
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([inline-on-2xl][position="left"])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([inline-on-2xl][position="left"][expanded])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
margin-inline-end: 0;
transform: translateX(0);
}
:host([inline-on-2xl][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-block-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
transform: translateY(100%);
}
:host([inline-on-2xl][expanded][position="bottom"])
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
margin-block-end: 0;
transform: translateY(0);
}
:host([static-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
:host([static-on-2xl][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
margin-inline-end: 0;
transform: translateX(0);
}
:host([static-on-2xl][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
@media screen and (min-width: 1200px) {
:host([position="bottom"]) {
--ak-v2-c-drawer__panel--MinWidth: auto;
--ak-v2-c-drawer__panel--MinHeight: var(
--ak-v2-c-drawer--m-panel-bottom__panel--xl--MinHeight
);
}
}
`;
//
export default styles;
web/src/elements/ak-drawer/ak-drawer.ts
+4 -4
View File
@@ -1,11 +1,11 @@
import { Drawer } from "./ak-drawer.component.js";
import { AkDrawer } from "./ak-drawer.component.js";
export { Drawer };
export { AkDrawer };
window.customElements.define("ak-drawer", Drawer);
window.customElements.define("ak-drawer", AkDrawer);
declare global {
interface HTMLElementTagNameMap {
"ak-drawer": Drawer;
"ak-drawer": AkDrawer;
}
}
web/src/elements/ak-drawer/drawerResizeController.ts
+195
View File
@@ -0,0 +1,195 @@
import { type AkDrawer } from "./ak-drawer.component";
import { match, P } from "ts-pattern";
import { ReactiveController, ReactiveControllerHost } from "lit";
type DrawerResizeControllerHost = ReactiveControllerHost & AkDrawer;
type Position = "start" | "end" | "left" | "right" | "bottom";
const oneOf = P.union;
const DEFAULT_SIZE_PROPERTY_NAME = "--ak-v2-c-drawer__panel--md--FlexBasis";
const DEFAULT_RESIZE_INCREMENT = 5;
interface ResizeControllerProps {
sizeProperty?: string;
resizeIncrement?: number;
}
export class DrawerResizeController implements ReactiveController {
#abortController: AbortController | null = null;
#positions: {
start: number;
end: number;
bottom: number;
} = { start: 0, end: 0, bottom: 0 };
public resizeIncrement: number;
public sizeProperty: string;
constructor(
private host: DrawerResizeControllerHost,
props: ResizeControllerProps = {},
) {
this.resizeIncrement = props.resizeIncrement ?? DEFAULT_RESIZE_INCREMENT;
this.sizeProperty = props.sizeProperty ?? DEFAULT_SIZE_PROPERTY_NAME;
}
endController() {
this.#abortController?.abort();
this.#abortController = null;
}
restartController() {
this.endController();
this.#abortController = new AbortController();
return this.#abortController.signal;
}
hostQ(part: string): HTMLElement {
const element = this.host.renderRoot.querySelector(part);
if (element === null || !(element instanceof HTMLElement)) {
throw new Error(`Could not identify requested part ${element}`);
}
return element;
}
get drawer() {
return this.hostQ('[part="drawer"]');
}
get panel() {
return this.hostQ('[part="drawer-panel"]');
}
get content() {
return this.hostQ('[part="drawer-panel-main"]');
}
get splitter() {
return this.hostQ('[part="drawer-splitter"]');
}
get inline() {
return this.host.hasAttribute("inline");
}
get position(): Position {
return (this.host.getAttribute("position") || "end") as Position;
}
initPositions() {
const pan = this.panel.getBoundingClientRect();
this.#positions = { start: pan.left, end: pan.right, bottom: pan.bottom };
}
setResizing(resizing: boolean = true) {
if (resizing) {
this.host.setAttribute("resizing", "");
} else {
this.host.removeAttribute("resizing");
}
}
get isResizing() {
return this.host.hasAttribute("resizing");
}
handleMove(ev: MouseEvent | TouchEvent, controlPosition: number) {
ev.stopPropagation();
const newSize = match(this.position)
.with(oneOf("end", "right"), () => this.#positions.end - controlPosition)
.with(oneOf("start", "left"), () => controlPosition - this.#positions.start)
.with("bottom", () => this.#positions.bottom - controlPosition)
.otherwise(() => {
throw new Error(`Do not recognize position: ${this.position}`);
});
if (this.position === "bottom") {
this.panel.style.overflowAnchor = "none";
}
this.panel.style.setProperty(DEFAULT_SIZE_PROPERTY_NAME, `${newSize}px`);
}
handleMouseMove = (ev: MouseEvent) => {
this.handleMove(ev, this.position === "bottom" ? ev.clientY : ev.clientX);
};
handleTouchMove = (ev: TouchEvent) => {
ev.preventDefault();
ev.stopImmediatePropagation();
const touch = ev.touches[0];
this.handleMove(ev, this.position === "bottom" ? touch.clientY : touch.clientX);
};
handleMouseUp = () => {
this.setResizing(false);
this.initPositions();
this.restartController();
};
handleTouchEnd = (ev: TouchEvent) => {
ev.stopPropagation();
this.handleMouseUp();
};
handleTouchStart = (ev: TouchEvent) => {
ev.stopPropagation();
const signal = this.restartController();
document.addEventListener("touchmove", this.handleTouchMove, { passive: false, signal });
document.addEventListener("touchend", this.handleTouchEnd, { signal });
this.initPositions();
this.setResizing();
};
handleMouseDown = (ev: MouseEvent) => {
ev.stopPropagation();
ev.preventDefault();
const signal = this.restartController();
document.addEventListener("mousemove", this.handleMouseMove, { signal });
document.addEventListener("mouseup", this.handleMouseUp, { signal });
this.initPositions();
this.setResizing();
};
handleKeyDown = (ev: KeyboardEvent) => {
const key = ev.key;
const positionKeys =
this.position === "bottom" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
const validKeys = ["Escape", "Enter", ...positionKeys];
// Prevent default behavior when resizing, but otherwise let it pass.
if (!validKeys.includes(key)) {
if (this.isResizing) {
ev.preventDefault();
}
return;
}
ev.preventDefault();
const delta = match([key, this.position])
.with(["ArrowRight", oneOf("end", "right")], () => -1 * this.resizeIncrement)
.with(["ArrowLeft", oneOf("end", "right")], () => this.resizeIncrement)
.with(["ArrowRight", oneOf("start", "left")], () => this.resizeIncrement)
.with(["ArrowLeft", oneOf("start", "left")], () => -1 * this.resizeIncrement)
.with(["ArrowUp", "bottom"], () => this.resizeIncrement)
.with(["ArrowDown", "bottom"], () => -1 * this.resizeIncrement)
.otherwise(() => 0);
const { height, width } = this.panel.getBoundingClientRect();
const newSize = (this.position === "bottom" ? height : width) + delta;
this.panel.style.setProperty(DEFAULT_SIZE_PROPERTY_NAME, `${newSize}px`);
};
hostConnected() {
this.host.updateComplete.then(() => {
this.initPositions();
});
}
hostDisconnected() {
this.#abortController?.abort();
this.#abortController = null;
}
}
web/src/flow/inspector/FlowInspectorButton.ts
+2 -2
View File
@@ -73,9 +73,9 @@ export class FlowInspectorButton extends WithCapabilitiesConfig(AKElement) {
const drawer = document.getElementById("flow-drawer");
if (changed.has("open") && drawer) {
if (this.open) {
drawer.setAttribute("open", "");
drawer.setAttribute("expanded", "");
} else {
drawer.removeAttribute("open");
drawer.removeAttribute("expanded");
}
}
}
web/src/styles/authentik/base/variables.css
+84 -2
View File
@@ -44,8 +44,90 @@
--ak-sidebar--minimum-auto-width: 80rem;
}
html[data-theme="dark"] {
--ak-global--BackgroundColorContrast--100: var(--pf-global--palette--black-150);
/* #region Root globals, V2 */
:root {
/* ---- Background Colors ---- */
--ak-v2-global--BackgroundColor--100: #fff;
--ak-v2-global--BorderWidth--sm: 1px;
/* ---- Text Colors ---------- */
--pf-v5-global--Color--100: #151515;
/* ---- Border Colors -------- */
--ak-v2-global--BorderColor--100: #d2d2d2;
--ak-v2-global--BorderColor--200: #8a8d90;
/* ---- Box Shadows ------ */
--ak-v2-global--BoxShadow--lg:
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08);
--ak-v2-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
--ak-v2-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
--ak-v2-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
--ak-v2-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
/* ---- Spacers -------------- */
--ak-v2-global--spacer--xs: 0.25rem;
--ak-v2-global--spacer--sm: 0.5rem;
--ak-v2-global--spacer--md: 1rem;
--ak-v2-global--spacer--lg: 1.5rem;
--ak-v2-global--spacer--xl: 2rem;
--ak-v2-global--spacer--2xl: 3rem;
--ak-v2-global--spacer--3xl: 4rem;
--ak-v2-global--spacer--4xl: 5rem;
--ak-v2-global--spacer--form-element: 0.375rem;
--ak-v2-global--gutter: 1rem;
--ak-v2-global--gutter--md: 1.5rem;
/* ---- Z-Index -------------- */
--ak-v2-global--ZIndex--xs: 100;
--ak-v2-global--ZIndex--sm: 200;
/* ---- Animation ------------ */
--ak-v2-global--TransitionDuration: 250ms;
/* ---- Customization Bridge - */
--ak-v2-global--dark-background: var(--ak-dark-background);
}
/* -------- Dark Theme ------------------------------- */
[data-theme="dark"] {
/* ---- Background Colors ---- */
--ak-v2-global--BackgroundColor--100: #18191a;
/* ---- Text Colors ---------- */
--ak-v2-global--Color--100: #e0e0e0;
/* ---- Border Colors -------- */
--ak-v2-global--BorderColor--100: #444548;
--ak-v2-global--BorderColor--200: #444548;
/* ---- Box Shadows ------ */
--ak-v2-global--BoxShadow--lg:
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.64), 0 0 0.375rem 0 rgba(3, 3, 3, 0.32);
--ak-v2-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
--ak-v2-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
--ak-v2-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
--ak-v2-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
}
/* -------- Semantic Names -------------------------- */
:root {
/* ---- Background Colors ---- */
--ak-v2-global--ContentSurface: var(--ak-v2-global--BackgroundColor--100);
--ak-v2-global--SecondaryContentSurface: var(--ak-v2-global--BackgroundColor--200);
/* Not sure what to call this next one; this is the background color Patternfly uses when you hover
over something and it changes color to indicate it's interactive in some way. It's the same
color as the one above in their default theme. */
--ak-v2-global--AffordanceIndicatedSurface: var(--ak-v2-global--BackgroundColor--200);
/* ---- Text Colors ---- */
--ak-v2-global--PrimaryText: var(--ak-v2-global--Color--100);
/* ---- Border Colors ---- */
--ak-v2-global--StandardBorder: var(--pf-v5-global--BorderColor--100);
--ak-v2-global--InputAccentBorder: var(--pf-v5-global--BorderColor--200);
}
/* #endregion */
web/src/styles/authentik/flows.global.css
+1
View File
@@ -14,6 +14,7 @@
@import "./base/globals.css";
@import "./base/common.css";
@import "./base/placeholder.css";
@import "#elements/ak-drawer/ak-drawer.root.css";
@import "#styles/locales/ja/globals.css";
@import "#styles/locales/ko/globals.css";
web/src/styles/authentik/static.global.css
+1
View File
@@ -12,6 +12,7 @@
@import "./components/Fieldset/fieldset.css";
@import "./components/Login/login.css";
@import "./components/Icon/icon.css";
@import "#elements/ak-drawer/ak-drawer.root.css";
@import "#elements/locale/ak-locale-select.css";
@import "#elements/locale/ak-locale-select.css";
@import "#flow/FlowExecutor.css";
web/stylelint.config.mjs
+21
View File
@@ -0,0 +1,21 @@
/** @type { import("stylelint").Config } */
export default {
extends: "stylelint-config-standard",
rules: {
"custom-property-pattern": [
"^([A-Za-z][A-Za-z0-9]*)((__|--?)[A-Za-z0-9]+)*$",
{
message: "Expected custom property name to be kebab-case",
},
],
"selector-class-pattern": [
"^([a-z][a-z0-9]*)((__?|-)[A-Za-z0-9]+)*$",
{
message: (/** @type {string} */ selector) =>
`Expected class selector "${selector}" to be kebab-case`,
},
],
"declaration-empty-line-before": null,
"media-feature-range-notation": null,
},
};