@spectrum-web-components/split-view 0.4.10 → 0.4.11
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/custom-elements.json +3 -3
- package/package.json +24 -7
- package/sp-split-view.dev.js +3 -0
- package/sp-split-view.dev.js.map +7 -0
- package/sp-split-view.js +3 -14
- package/sp-split-view.js.map +7 -1
- package/src/SplitView.dev.js +319 -0
- package/src/SplitView.dev.js.map +7 -0
- package/src/SplitView.js +279 -310
- package/src/SplitView.js.map +7 -1
- package/src/index.dev.js +2 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -13
- package/src/index.js.map +7 -1
- package/src/spectrum-split-view.css.dev.js +99 -0
- package/src/spectrum-split-view.css.dev.js.map +7 -0
- package/src/spectrum-split-view.css.js +3 -14
- package/src/spectrum-split-view.css.js.map +7 -1
- package/src/split-view.css.dev.js +111 -0
- package/src/split-view.css.dev.js.map +7 -0
- package/src/split-view.css.js +3 -14
- package/src/split-view.css.js.map +7 -1
- package/src/types.dev.js +1 -0
- package/src/types.dev.js.map +7 -0
- package/src/types.js +1 -13
- package/src/types.js.map +7 -1
- package/stories/split-view.stories.js +36 -47
- package/stories/split-view.stories.js.map +7 -1
- package/test/benchmark/basic-test.js +5 -16
- package/test/benchmark/basic-test.js.map +7 -1
- package/test/split-view.test-vrt.js +4 -15
- package/test/split-view.test-vrt.js.map +7 -1
- package/test/split-view.test.js +540 -542
- package/test/split-view.test.js.map +7 -1
package/src/SplitView.js.map
CHANGED
@@ -1 +1,7 @@
|
|
1
|
-
{"version":3,"file":"SplitView.js","sourceRoot":"","sources":["SplitView.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n LitElement,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\n\nimport { WithSWCResizeObserver } from './types';\n\nimport styles from './split-view.css.js';\n\nconst DEFAULT_MAX_SIZE = 3840;\n\nconst SPLITTERSIZE = 2;\n\nconst ARROW_KEY_CHANGE_VALUE = 10;\n\nconst PAGEUPDOWN_KEY_CHANGE_VALUE = 50;\n\nconst COLLAPSE_THREASHOLD = 50;\n\n/**\n * @element sp-split-view\n *\n * @slot Two sibling elements to be sized by the element attritubes\n */\nexport class SplitView extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Boolean, reflect: true })\n public resizable = false;\n\n @property({ type: Boolean, reflect: true })\n public collapsible = false;\n\n /** The minimum size of the primary pane */\n @property({ type: Number, attribute: 'primary-min' })\n public primaryMin = 0;\n\n /** The maximum size of the primary pane */\n @property({ type: Number, attribute: 'primary-max' })\n public primaryMax = DEFAULT_MAX_SIZE;\n\n /**\n * The start size of the primary pane, can be a real pixel number|string, percentage or \"auto\"\n * For example: \"100\", \"120px\", \"75%\" or \"auto\" are valid values\n * @type {number | number + \"px\" | number + \"%\" | \"auto\"}\n * @attr\n */\n @property({ type: String, attribute: 'primary-size' })\n public primarySize?: string;\n\n /** The minimum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-min' })\n public secondaryMin = 0;\n\n /** The maximum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-max' })\n public secondaryMax = DEFAULT_MAX_SIZE;\n\n /** The current splitter position of split-view */\n @property({ type: Number, reflect: true, attribute: 'splitter-pos' })\n public splitterPos?: number;\n\n /** The current size of first pane of split-view */\n @property({ type: String, attribute: false })\n private firstPaneSize = 'auto';\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, attribute: false })\n private enoughChildren = false;\n\n @property({ type: Number })\n private viewSize = 0;\n\n @query('slot')\n private paneSlot!: HTMLSlotElement;\n\n @query('#splitter')\n private splitter!: HTMLDivElement;\n\n private offset = 0;\n\n private minPos = 0;\n\n private maxPos = DEFAULT_MAX_SIZE;\n\n private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n private rect?: DOMRect;\n\n private _splitterSize?: number;\n\n public constructor() {\n super();\n const RO = (window as unknown as WithSWCResizeObserver).ResizeObserver;\n if (RO) {\n this.observer = new RO(() => {\n this.rect = undefined;\n this.updateMinMax();\n });\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.observer?.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n\n /**\n * @private\n **/\n public get splitterSize(): number {\n if (!this._splitterSize) {\n this._splitterSize =\n (this.splitter &&\n Math.round(\n parseFloat(\n window\n .getComputedStyle(this.splitter)\n .getPropertyValue(\n this.vertical ? 'height' : 'width'\n )\n )\n )) ||\n SPLITTERSIZE;\n }\n return this._splitterSize;\n }\n\n protected override render(): TemplateResult {\n const splitterClasses = {\n 'is-resized-start': this.splitterPos === this.minPos,\n 'is-resized-end': (this.splitterPos &&\n this.splitterPos > this.splitterSize &&\n this.splitterPos === this.maxPos) as boolean,\n 'is-collapsed-start': this.splitterPos === 0,\n 'is-collapsed-end': (this.splitterPos &&\n this.splitterPos >=\n Math.max(\n this.splitterSize,\n this.viewSize - this.splitterSize\n )) as boolean,\n };\n return html`\n <slot\n @slotchange=${this.onContentSlotChange}\n style=\"--spectrum-split-view-first-pane-size: ${this\n .firstPaneSize}\"\n ></slot>\n ${this.enoughChildren\n ? html`\n <div\n id=\"splitter\"\n class=${classMap(splitterClasses)}\n role=\"separator\"\n aria-label=${ifDefined(this.label || undefined)}\n tabindex=${ifDefined(\n this.resizable ? '0' : undefined\n )}\n @keydown=${this.onKeydown}\n ${streamingListener({\n start: ['pointerdown', this.onPointerdown],\n streamInside: ['pointermove', this.onPointermove],\n end: [\n [\n 'pointerup',\n 'pointercancel',\n 'pointerleave',\n ],\n this.onPointerup,\n ],\n })}\n >\n ${this.resizable\n ? html`\n <div id=\"gripper\"></div>\n `\n : html``}\n </div>\n `\n : nothing}\n `;\n }\n\n private onContentSlotChange(): void {\n this.enoughChildren = this.children.length > 1;\n this.checkResize();\n }\n\n private onPointerdown(event: PointerEvent): void {\n if (!this.resizable || (event.button && event.button !== 0)) {\n event.preventDefault();\n return;\n }\n this.splitter.setPointerCapture(event.pointerId);\n this.offset = this.getOffset();\n }\n\n private onPointermove(event: PointerEvent): void {\n event.preventDefault();\n let pos =\n this.vertical || this.isLTR\n ? this.getPosition(event) - this.offset\n : this.offset - this.getPosition(event);\n if (this.collapsible && pos < this.minPos - COLLAPSE_THREASHOLD) {\n pos = 0;\n }\n if (this.collapsible && pos > this.maxPos + COLLAPSE_THREASHOLD) {\n pos = this.viewSize - this.splitterSize;\n }\n this.updatePosition(pos);\n }\n\n private onPointerup(event: PointerEvent): void {\n this.splitter.releasePointerCapture(event.pointerId);\n }\n\n private getOffset(): number {\n if (!this.rect) {\n this.rect = this.getBoundingClientRect();\n }\n const offsetX = this.isLTR ? this.rect.left : this.rect.right;\n return this.vertical ? this.rect.top : offsetX;\n }\n\n private getPosition(event: PointerEvent): number {\n return this.vertical ? event.clientY : event.clientX;\n }\n\n private movePosition(event: KeyboardEvent, offset: number): void {\n event.preventDefault();\n if (this.splitterPos !== undefined) {\n this.updatePosition(this.splitterPos + offset);\n }\n }\n\n private onKeydown(event: KeyboardEvent): void {\n if (!this.resizable) {\n return;\n }\n let direction = 0;\n const isLTRorVertical = this.isLTR || this.vertical;\n switch (event.key) {\n case 'Home':\n event.preventDefault();\n this.updatePosition(this.collapsible ? 0 : this.minPos);\n return;\n case 'End':\n event.preventDefault();\n this.updatePosition(\n this.collapsible\n ? this.viewSize - this.splitterSize\n : this.maxPos\n );\n return;\n case 'ArrowLeft':\n direction = isLTRorVertical ? -1 : 1;\n break;\n case 'ArrowRight':\n direction = isLTRorVertical ? 1 : -1;\n break;\n case 'ArrowUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'ArrowDown':\n direction = this.vertical ? 1 : -1;\n break;\n case 'PageUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'PageDown':\n direction = this.vertical ? 1 : -1;\n break;\n }\n if (direction !== 0) {\n const moveBy = event.key.startsWith('Page')\n ? PAGEUPDOWN_KEY_CHANGE_VALUE\n : ARROW_KEY_CHANGE_VALUE;\n this.movePosition(event, moveBy * direction);\n }\n }\n\n private async checkResize(): Promise<void> {\n if (!this.enoughChildren) {\n return;\n }\n this.updateMinMax();\n if (this.splitterPos === undefined) {\n const startPos = await this.calcStartPos();\n this.updatePosition(startPos);\n }\n }\n\n private updateMinMax(): void {\n this.viewSize = this.vertical ? this.offsetHeight : this.offsetWidth;\n this.minPos = Math.max(\n this.primaryMin,\n this.viewSize - this.secondaryMax\n );\n this.maxPos = Math.min(\n this.primaryMax,\n this.viewSize - Math.max(this.secondaryMin, this.splitterSize)\n );\n }\n\n private updatePosition(x: number): void {\n let pos = this.getLimitedPosition(x);\n if (this.collapsible && x <= 0) {\n pos = 0;\n }\n if (\n this.collapsible &&\n x > this.maxPos &&\n x >= this.viewSize - this.splitterSize\n ) {\n pos = this.viewSize - this.splitterSize;\n }\n if (pos !== this.splitterPos) {\n this.splitterPos = pos;\n this.dispatchChangeEvent();\n }\n }\n\n private getLimitedPosition(input: number): number {\n if (input <= this.minPos) {\n return this.minPos;\n }\n if (input >= this.maxPos) {\n return this.maxPos;\n }\n return Math.max(this.minPos, Math.min(this.maxPos, input));\n }\n\n private async calcStartPos(): Promise<number> {\n if (\n this.primarySize !== undefined &&\n /^\\d+(px)?$/.test(this.primarySize)\n ) {\n return parseInt(this.primarySize, 10);\n }\n if (this.primarySize !== undefined && /^\\d+%$/.test(this.primarySize)) {\n return (parseInt(this.primarySize, 10) * this.viewSize) / 100;\n }\n if (this.primarySize === 'auto') {\n this.firstPaneSize = 'auto';\n const nodes = this.paneSlot.assignedNodes({ flatten: true });\n const firstEl = nodes.find(\n (node) => node instanceof HTMLElement\n ) as LitElement;\n if (typeof firstEl.updateComplete !== 'undefined') {\n await firstEl.updateComplete;\n }\n if (firstEl) {\n const size = window\n .getComputedStyle(firstEl)\n .getPropertyValue(this.vertical ? 'height' : 'width');\n const size_i = parseFloat(size);\n if (!isNaN(size_i)) {\n return this.getLimitedPosition(Math.ceil(size_i));\n }\n }\n }\n return this.viewSize / 2;\n }\n\n private dispatchChangeEvent(): void {\n const changeEvent = new Event('change', {\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(changeEvent);\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (!this.hasUpdated || changed.has('primarySize')) {\n this.splitterPos = undefined;\n this.checkResize();\n }\n if (\n changed.has('splitterPos') &&\n this.splitterPos !== undefined &&\n this.enoughChildren\n ) {\n this.firstPaneSize = `${Math.round(this.splitterPos)}px`;\n }\n }\n}\n"]}
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["SplitView.ts"],
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n LitElement,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n classMap,\n ifDefined,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\n\nimport { WithSWCResizeObserver } from './types';\n\nimport styles from './split-view.css.js';\n\nconst DEFAULT_MAX_SIZE = 3840;\n\nconst SPLITTERSIZE = 2;\n\nconst ARROW_KEY_CHANGE_VALUE = 10;\n\nconst PAGEUPDOWN_KEY_CHANGE_VALUE = 50;\n\nconst COLLAPSE_THREASHOLD = 50;\n\n/**\n * @element sp-split-view\n *\n * @slot Two sibling elements to be sized by the element attritubes\n */\nexport class SplitView extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Boolean, reflect: true })\n public resizable = false;\n\n @property({ type: Boolean, reflect: true })\n public collapsible = false;\n\n /** The minimum size of the primary pane */\n @property({ type: Number, attribute: 'primary-min' })\n public primaryMin = 0;\n\n /** The maximum size of the primary pane */\n @property({ type: Number, attribute: 'primary-max' })\n public primaryMax = DEFAULT_MAX_SIZE;\n\n /**\n * The start size of the primary pane, can be a real pixel number|string, percentage or \"auto\"\n * For example: \"100\", \"120px\", \"75%\" or \"auto\" are valid values\n * @type {number |\u00A0number + \"px\" | number + \"%\" | \"auto\"}\n * @attr\n */\n @property({ type: String, attribute: 'primary-size' })\n public primarySize?: string;\n\n /** The minimum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-min' })\n public secondaryMin = 0;\n\n /** The maximum size of the secondary pane */\n @property({ type: Number, attribute: 'secondary-max' })\n public secondaryMax = DEFAULT_MAX_SIZE;\n\n /** The current splitter position of split-view */\n @property({ type: Number, reflect: true, attribute: 'splitter-pos' })\n public splitterPos?: number;\n\n /** The current size of first pane of split-view */\n @property({ type: String, attribute: false })\n private firstPaneSize = 'auto';\n\n @property()\n public label?: string;\n\n @property({ type: Boolean, attribute: false })\n private enoughChildren = false;\n\n @property({ type: Number })\n private viewSize = 0;\n\n @query('slot')\n private paneSlot!: HTMLSlotElement;\n\n @query('#splitter')\n private splitter!: HTMLDivElement;\n\n private offset = 0;\n\n private minPos = 0;\n\n private maxPos = DEFAULT_MAX_SIZE;\n\n private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n private rect?: DOMRect;\n\n private _splitterSize?: number;\n\n public constructor() {\n super();\n const RO = (window as unknown as WithSWCResizeObserver).ResizeObserver;\n if (RO) {\n this.observer = new RO(() => {\n this.rect = undefined;\n this.updateMinMax();\n });\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.observer?.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n\n /**\n * @private\n **/\n public get splitterSize(): number {\n if (!this._splitterSize) {\n this._splitterSize =\n (this.splitter &&\n Math.round(\n parseFloat(\n window\n .getComputedStyle(this.splitter)\n .getPropertyValue(\n this.vertical ? 'height' : 'width'\n )\n )\n )) ||\n SPLITTERSIZE;\n }\n return this._splitterSize;\n }\n\n protected override render(): TemplateResult {\n const splitterClasses = {\n 'is-resized-start': this.splitterPos === this.minPos,\n 'is-resized-end': (this.splitterPos &&\n this.splitterPos > this.splitterSize &&\n this.splitterPos === this.maxPos) as boolean,\n 'is-collapsed-start': this.splitterPos === 0,\n 'is-collapsed-end': (this.splitterPos &&\n this.splitterPos >=\n Math.max(\n this.splitterSize,\n this.viewSize - this.splitterSize\n )) as boolean,\n };\n return html`\n <slot\n @slotchange=${this.onContentSlotChange}\n style=\"--spectrum-split-view-first-pane-size: ${this\n .firstPaneSize}\"\n ></slot>\n ${this.enoughChildren\n ? html`\n <div\n id=\"splitter\"\n class=${classMap(splitterClasses)}\n role=\"separator\"\n aria-label=${ifDefined(this.label || undefined)}\n tabindex=${ifDefined(\n this.resizable ? '0' : undefined\n )}\n @keydown=${this.onKeydown}\n ${streamingListener({\n start: ['pointerdown', this.onPointerdown],\n streamInside: ['pointermove', this.onPointermove],\n end: [\n [\n 'pointerup',\n 'pointercancel',\n 'pointerleave',\n ],\n this.onPointerup,\n ],\n })}\n >\n ${this.resizable\n ? html`\n <div id=\"gripper\"></div>\n `\n : html``}\n </div>\n `\n : nothing}\n `;\n }\n\n private onContentSlotChange(): void {\n this.enoughChildren = this.children.length > 1;\n this.checkResize();\n }\n\n private onPointerdown(event: PointerEvent): void {\n if (!this.resizable || (event.button && event.button !== 0)) {\n event.preventDefault();\n return;\n }\n this.splitter.setPointerCapture(event.pointerId);\n this.offset = this.getOffset();\n }\n\n private onPointermove(event: PointerEvent): void {\n event.preventDefault();\n let pos =\n this.vertical || this.isLTR\n ? this.getPosition(event) - this.offset\n : this.offset - this.getPosition(event);\n if (this.collapsible && pos < this.minPos - COLLAPSE_THREASHOLD) {\n pos = 0;\n }\n if (this.collapsible && pos > this.maxPos + COLLAPSE_THREASHOLD) {\n pos = this.viewSize - this.splitterSize;\n }\n this.updatePosition(pos);\n }\n\n private onPointerup(event: PointerEvent): void {\n this.splitter.releasePointerCapture(event.pointerId);\n }\n\n private getOffset(): number {\n if (!this.rect) {\n this.rect = this.getBoundingClientRect();\n }\n const offsetX = this.isLTR ? this.rect.left : this.rect.right;\n return this.vertical ? this.rect.top : offsetX;\n }\n\n private getPosition(event: PointerEvent): number {\n return this.vertical ? event.clientY : event.clientX;\n }\n\n private movePosition(event: KeyboardEvent, offset: number): void {\n event.preventDefault();\n if (this.splitterPos !== undefined) {\n this.updatePosition(this.splitterPos + offset);\n }\n }\n\n private onKeydown(event: KeyboardEvent): void {\n if (!this.resizable) {\n return;\n }\n let direction = 0;\n const isLTRorVertical = this.isLTR || this.vertical;\n switch (event.key) {\n case 'Home':\n event.preventDefault();\n this.updatePosition(this.collapsible ? 0 : this.minPos);\n return;\n case 'End':\n event.preventDefault();\n this.updatePosition(\n this.collapsible\n ? this.viewSize - this.splitterSize\n : this.maxPos\n );\n return;\n case 'ArrowLeft':\n direction = isLTRorVertical ? -1 : 1;\n break;\n case 'ArrowRight':\n direction = isLTRorVertical ? 1 : -1;\n break;\n case 'ArrowUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'ArrowDown':\n direction = this.vertical ? 1 : -1;\n break;\n case 'PageUp':\n direction = this.vertical ? -1 : 1;\n break;\n case 'PageDown':\n direction = this.vertical ? 1 : -1;\n break;\n }\n if (direction !== 0) {\n const moveBy = event.key.startsWith('Page')\n ? PAGEUPDOWN_KEY_CHANGE_VALUE\n : ARROW_KEY_CHANGE_VALUE;\n this.movePosition(event, moveBy * direction);\n }\n }\n\n private async checkResize(): Promise<void> {\n if (!this.enoughChildren) {\n return;\n }\n this.updateMinMax();\n if (this.splitterPos === undefined) {\n const startPos = await this.calcStartPos();\n this.updatePosition(startPos);\n }\n }\n\n private updateMinMax(): void {\n this.viewSize = this.vertical ? this.offsetHeight : this.offsetWidth;\n this.minPos = Math.max(\n this.primaryMin,\n this.viewSize - this.secondaryMax\n );\n this.maxPos = Math.min(\n this.primaryMax,\n this.viewSize - Math.max(this.secondaryMin, this.splitterSize)\n );\n }\n\n private updatePosition(x: number): void {\n let pos = this.getLimitedPosition(x);\n if (this.collapsible && x <= 0) {\n pos = 0;\n }\n if (\n this.collapsible &&\n x > this.maxPos &&\n x >= this.viewSize - this.splitterSize\n ) {\n pos = this.viewSize - this.splitterSize;\n }\n if (pos !== this.splitterPos) {\n this.splitterPos = pos;\n this.dispatchChangeEvent();\n }\n }\n\n private getLimitedPosition(input: number): number {\n if (input <= this.minPos) {\n return this.minPos;\n }\n if (input >= this.maxPos) {\n return this.maxPos;\n }\n return Math.max(this.minPos, Math.min(this.maxPos, input));\n }\n\n private async calcStartPos(): Promise<number> {\n if (\n this.primarySize !== undefined &&\n /^\\d+(px)?$/.test(this.primarySize)\n ) {\n return parseInt(this.primarySize, 10);\n }\n if (this.primarySize !== undefined && /^\\d+%$/.test(this.primarySize)) {\n return (parseInt(this.primarySize, 10) * this.viewSize) / 100;\n }\n if (this.primarySize === 'auto') {\n this.firstPaneSize = 'auto';\n const nodes = this.paneSlot.assignedNodes({ flatten: true });\n const firstEl = nodes.find(\n (node) => node instanceof HTMLElement\n ) as LitElement;\n if (typeof firstEl.updateComplete !== 'undefined') {\n await firstEl.updateComplete;\n }\n if (firstEl) {\n const size = window\n .getComputedStyle(firstEl)\n .getPropertyValue(this.vertical ? 'height' : 'width');\n const size_i = parseFloat(size);\n if (!isNaN(size_i)) {\n return this.getLimitedPosition(Math.ceil(size_i));\n }\n }\n }\n return this.viewSize / 2;\n }\n\n private dispatchChangeEvent(): void {\n const changeEvent = new Event('change', {\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(changeEvent);\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (!this.hasUpdated || changed.has('primarySize')) {\n this.splitterPos = undefined;\n this.checkResize();\n }\n if (\n changed.has('splitterPos') &&\n this.splitterPos !== undefined &&\n this.enoughChildren\n ) {\n this.firstPaneSize = `${Math.round(this.splitterPos)}px`;\n }\n }\n}\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": []
|
7
|
+
}
|
package/src/index.dev.js
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["index.ts"],
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './SplitView.dev.js'\n"],
|
5
|
+
"mappings": "AAYA;",
|
6
|
+
"names": []
|
7
|
+
}
|
package/src/index.js
CHANGED
@@ -1,13 +1,2 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
6
|
-
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
10
|
-
governing permissions and limitations under the License.
|
11
|
-
*/
|
12
|
-
export * from './SplitView.js';
|
13
|
-
//# sourceMappingURL=index.js.map
|
1
|
+
export * from "./SplitView.js";
|
2
|
+
//# sourceMappingURL=index.js.map
|
package/src/index.js.map
CHANGED
@@ -1 +1,7 @@
|
|
1
|
-
{
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["index.ts"],
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './SplitView.js';\n"],
|
5
|
+
"mappings": "AAYA;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,99 @@
|
|
1
|
+
import { css } from "@spectrum-web-components/base";
|
2
|
+
const styles = css`
|
3
|
+
:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(
|
4
|
+
--spectrum-dragbar-gripper-width,
|
5
|
+
var(--spectrum-global-dimension-static-size-50)
|
6
|
+
) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
|
7
|
+
--spectrum-dragbar-handle-width,
|
8
|
+
var(--spectrum-global-dimension-static-size-25)
|
9
|
+
))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(
|
10
|
+
--spectrum-dragbar-gripper-width,
|
11
|
+
var(--spectrum-global-dimension-static-size-50)
|
12
|
+
) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
|
13
|
+
--spectrum-dragbar-handle-width,
|
14
|
+
var(--spectrum-global-dimension-static-size-25)
|
15
|
+
))/2*-1)}#gripper{border-radius:var(
|
16
|
+
--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)
|
17
|
+
);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:"";display:block;height:var(
|
18
|
+
--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)
|
19
|
+
);position:absolute;top:50%;transform:translateY(-50%);width:var(
|
20
|
+
--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
|
21
|
+
)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(
|
22
|
+
--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
|
23
|
+
);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(
|
24
|
+
--spectrum-dragbar-handle-width,
|
25
|
+
var(--spectrum-global-dimension-static-size-25)
|
26
|
+
)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(
|
27
|
+
--spectrum-dragbar-handle-width,
|
28
|
+
var(--spectrum-global-dimension-static-size-25)
|
29
|
+
)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";height:100%;position:absolute;top:0;width:var(
|
30
|
+
--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
|
31
|
+
)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(
|
32
|
+
--spectrum-splitview-vertical-gripper-width
|
33
|
+
)}:host([dir=rtl][vertical]) #gripper{right:var(
|
34
|
+
--spectrum-splitview-vertical-gripper-width
|
35
|
+
)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(
|
36
|
+
--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
|
37
|
+
);top:calc((var(
|
38
|
+
--spectrum-dragbar-gripper-width,
|
39
|
+
var(--spectrum-global-dimension-static-size-50)
|
40
|
+
) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
|
41
|
+
--spectrum-dragbar-handle-width,
|
42
|
+
var(--spectrum-global-dimension-static-size-25)
|
43
|
+
))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(
|
44
|
+
--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)
|
45
|
+
)}:host([vertical]) #splitter{height:var(
|
46
|
+
--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
|
47
|
+
);width:var(
|
48
|
+
--spectrum-splitview-vertical-width
|
49
|
+
)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(
|
50
|
+
--spectrum-splitview-vertical-gripper-width
|
51
|
+
)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(
|
52
|
+
--spectrum-splitview-vertical-gripper-width
|
53
|
+
)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(
|
54
|
+
--spectrum-splitview-vertical-gripper-reset
|
55
|
+
)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(
|
56
|
+
--spectrum-splitview-vertical-gripper-reset
|
57
|
+
)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(
|
58
|
+
--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
|
59
|
+
);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(
|
60
|
+
--spectrum-dragbar-handle-width,
|
61
|
+
var(--spectrum-global-dimension-static-size-25)
|
62
|
+
)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(
|
63
|
+
--spectrum-splitview-vertical-gripper-reset
|
64
|
+
)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(
|
65
|
+
--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)
|
66
|
+
)}#splitter{background-color:var(
|
67
|
+
--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
|
68
|
+
)}#gripper{border-color:var(
|
69
|
+
--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
|
70
|
+
)}#gripper:before{background-color:var(
|
71
|
+
--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
|
72
|
+
)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(
|
73
|
+
--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
|
74
|
+
)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(
|
75
|
+
--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
|
76
|
+
)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(
|
77
|
+
--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
|
78
|
+
)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(
|
79
|
+
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
80
|
+
)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(
|
81
|
+
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
82
|
+
)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(
|
83
|
+
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
84
|
+
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
|
85
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
86
|
+
)}:host([resizable]) #splitter:focus-visible{background-color:var(
|
87
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
88
|
+
)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
|
89
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
90
|
+
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
|
91
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
92
|
+
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
|
93
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
94
|
+
)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
|
95
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
96
|
+
)}
|
97
|
+
`;
|
98
|
+
export default styles;
|
99
|
+
//# sourceMappingURL=spectrum-split-view.css.dev.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["spectrum-split-view.css.ts"],
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=rtl][vertical]) #gripper{right:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(\n--spectrum-splitview-vertical-width\n)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}\n`;\nexport default styles;"],
|
5
|
+
"mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgGf,eAAe;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -1,16 +1,5 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
6
|
-
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
10
|
-
governing permissions and limitations under the License.
|
11
|
-
*/
|
12
|
-
import { css } from '@spectrum-web-components/base';
|
13
|
-
const styles = css `
|
1
|
+
import { css } from "@spectrum-web-components/base";
|
2
|
+
const styles = css`
|
14
3
|
:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(
|
15
4
|
--spectrum-dragbar-gripper-width,
|
16
5
|
var(--spectrum-global-dimension-static-size-50)
|
@@ -107,4 +96,4 @@ var(--spectrum-global-dimension-static-size-25)
|
|
107
96
|
)}
|
108
97
|
`;
|
109
98
|
export default styles;
|
110
|
-
//# sourceMappingURL=spectrum-split-view.css.js.map
|
99
|
+
//# sourceMappingURL=spectrum-split-view.css.js.map
|
@@ -1 +1,7 @@
|
|
1
|
-
{
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["spectrum-split-view.css.ts"],
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=rtl][vertical]) #gripper{right:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(\n--spectrum-splitview-vertical-width\n)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}\n`;\nexport default styles;"],
|
5
|
+
"mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgGf,eAAe;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,111 @@
|
|
1
|
+
import { css } from "@spectrum-web-components/base";
|
2
|
+
const styles = css`
|
3
|
+
:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(
|
4
|
+
--spectrum-dragbar-gripper-width,
|
5
|
+
var(--spectrum-global-dimension-static-size-50)
|
6
|
+
) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
|
7
|
+
--spectrum-dragbar-handle-width,
|
8
|
+
var(--spectrum-global-dimension-static-size-25)
|
9
|
+
))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(
|
10
|
+
--spectrum-dragbar-gripper-width,
|
11
|
+
var(--spectrum-global-dimension-static-size-50)
|
12
|
+
) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
|
13
|
+
--spectrum-dragbar-handle-width,
|
14
|
+
var(--spectrum-global-dimension-static-size-25)
|
15
|
+
))/2*-1)}#gripper{border-radius:var(
|
16
|
+
--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)
|
17
|
+
);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:"";display:block;height:var(
|
18
|
+
--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)
|
19
|
+
);position:absolute;top:50%;transform:translateY(-50%);width:var(
|
20
|
+
--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
|
21
|
+
)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(
|
22
|
+
--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
|
23
|
+
);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(
|
24
|
+
--spectrum-dragbar-handle-width,
|
25
|
+
var(--spectrum-global-dimension-static-size-25)
|
26
|
+
)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(
|
27
|
+
--spectrum-dragbar-handle-width,
|
28
|
+
var(--spectrum-global-dimension-static-size-25)
|
29
|
+
)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:"";height:100%;position:absolute;top:0;width:var(
|
30
|
+
--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
|
31
|
+
)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(
|
32
|
+
--spectrum-splitview-vertical-gripper-width
|
33
|
+
)}:host([dir=rtl][vertical]) #gripper{right:var(
|
34
|
+
--spectrum-splitview-vertical-gripper-width
|
35
|
+
)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(
|
36
|
+
--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)
|
37
|
+
);top:calc((var(
|
38
|
+
--spectrum-dragbar-gripper-width,
|
39
|
+
var(--spectrum-global-dimension-static-size-50)
|
40
|
+
) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
|
41
|
+
--spectrum-dragbar-handle-width,
|
42
|
+
var(--spectrum-global-dimension-static-size-25)
|
43
|
+
))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(
|
44
|
+
--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)
|
45
|
+
)}:host([vertical]) #splitter{height:var(
|
46
|
+
--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
|
47
|
+
);width:var(
|
48
|
+
--spectrum-splitview-vertical-width
|
49
|
+
)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(
|
50
|
+
--spectrum-splitview-vertical-gripper-width
|
51
|
+
)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(
|
52
|
+
--spectrum-splitview-vertical-gripper-width
|
53
|
+
)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(
|
54
|
+
--spectrum-splitview-vertical-gripper-reset
|
55
|
+
)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(
|
56
|
+
--spectrum-splitview-vertical-gripper-reset
|
57
|
+
)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(
|
58
|
+
--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)
|
59
|
+
);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(
|
60
|
+
--spectrum-dragbar-handle-width,
|
61
|
+
var(--spectrum-global-dimension-static-size-25)
|
62
|
+
)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(
|
63
|
+
--spectrum-splitview-vertical-gripper-reset
|
64
|
+
)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(
|
65
|
+
--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)
|
66
|
+
)}#splitter{background-color:var(
|
67
|
+
--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
|
68
|
+
)}#gripper{border-color:var(
|
69
|
+
--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
|
70
|
+
)}#gripper:before{background-color:var(
|
71
|
+
--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)
|
72
|
+
)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(
|
73
|
+
--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
|
74
|
+
)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(
|
75
|
+
--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
|
76
|
+
)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(
|
77
|
+
--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)
|
78
|
+
)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(
|
79
|
+
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
80
|
+
)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(
|
81
|
+
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
82
|
+
)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(
|
83
|
+
--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)
|
84
|
+
)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
|
85
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
86
|
+
)}:host([resizable]) #splitter:focus-visible{background-color:var(
|
87
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
88
|
+
)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
|
89
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
90
|
+
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
|
91
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
92
|
+
);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
|
93
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
94
|
+
)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
|
95
|
+
--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)
|
96
|
+
)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(
|
97
|
+
--spectrum-dragbar-gripper-width,
|
98
|
+
var(--spectrum-global-dimension-static-size-50)
|
99
|
+
) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
|
100
|
+
--spectrum-dragbar-handle-width,
|
101
|
+
var(--spectrum-global-dimension-static-size-25)
|
102
|
+
))/2*-1)}:host([dir=rtl][resizable]) #gripper{right:calc(var(--spectrum-global-dimension-static-size-125) + (var(
|
103
|
+
--spectrum-dragbar-gripper-width,
|
104
|
+
var(--spectrum-global-dimension-static-size-50)
|
105
|
+
) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(
|
106
|
+
--spectrum-dragbar-handle-width,
|
107
|
+
var(--spectrum-global-dimension-static-size-25)
|
108
|
+
))/2*-1)}:host([vertical][resizable]) #gripper{left:50%;margin-top:var(--spectrum-global-dimension-static-size-125);right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{left:50%;margin-top:0;right:50%;top:var(--spectrum-global-dimension-static-size-25)}
|
109
|
+
`;
|
110
|
+
export default styles;
|
111
|
+
//# sourceMappingURL=split-view.css.dev.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["split-view.css.ts"],
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}#gripper{border-radius:var(\n--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small)\n);border-style:solid;border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px);content:\"\";display:block;height:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n);position:absolute;top:50%;transform:translateY(-50%);width:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n)}#splitter{height:100%;position:relative;-webkit-user-select:none;user-select:none;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";height:100%;position:absolute;top:0;width:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n)}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=rtl][vertical]) #gripper{right:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([vertical]) #gripper{border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px);height:var(\n--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50)\n);top:calc((var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1);transform:translate(calc(var(--spectrum-splitview-vertical-gripper-width)*-1));width:var(\n--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200)\n)}:host([vertical]) #splitter{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);width:var(\n--spectrum-splitview-vertical-width\n)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(\n--spectrum-splitview-vertical-gripper-width\n)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{height:var(\n--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25)\n);top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n)/2);width:var(--spectrum-splitview-vertical-gripper-outer-width)}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(\n--spectrum-splitview-vertical-gripper-reset\n)}:host([vertical]) #splitter.is-collapsed-end #gripper{bottom:var(--spectrum-splitview-vertical-gripper-reset);top:auto}::slotted(*){background-color:var(\n--spectrum-panel-s-background-color,var(--spectrum-alias-toolbar-background-color)\n)}#splitter{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper{border-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}#gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300)\n)}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(\n--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800)\n)}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n)}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){flex:1;order:3}::slotted(:nth-child(n+3)){display:none}#splitter{height:auto;order:2}:host([resizable]) #splitter{background-clip:content-box;cursor:ew-resize;margin:0 calc(var(--spectrum-global-dimension-static-size-125)*-1);padding:0 var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter{background-clip:content-box;cursor:ns-resize;margin:calc(var(--spectrum-global-dimension-static-size-125)*-1) 0;padding:var(--spectrum-global-dimension-static-size-125) 0}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([dir=rtl][resizable]) #gripper{right:calc(var(--spectrum-global-dimension-static-size-125) + (var(\n--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)\n) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(\n--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)\n))/2*-1)}:host([vertical][resizable]) #gripper{left:50%;margin-top:var(--spectrum-global-dimension-static-size-125);right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{left:50%;margin-top:0;right:50%;top:var(--spectrum-global-dimension-static-size-25)}\n`;\nexport default styles;"],
|
5
|
+
"mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4Gf,eAAe;",
|
6
|
+
"names": []
|
7
|
+
}
|
package/src/split-view.css.js
CHANGED
@@ -1,16 +1,5 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
6
|
-
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
10
|
-
governing permissions and limitations under the License.
|
11
|
-
*/
|
12
|
-
import { css } from '@spectrum-web-components/base';
|
13
|
-
const styles = css `
|
1
|
+
import { css } from "@spectrum-web-components/base";
|
2
|
+
const styles = css`
|
14
3
|
:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0}:host{display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(
|
15
4
|
--spectrum-dragbar-gripper-width,
|
16
5
|
var(--spectrum-global-dimension-static-size-50)
|
@@ -119,4 +108,4 @@ var(--spectrum-global-dimension-static-size-25)
|
|
119
108
|
))/2*-1)}:host([vertical][resizable]) #gripper{left:50%;margin-top:var(--spectrum-global-dimension-static-size-125);right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{left:50%;margin-top:0;right:50%;top:var(--spectrum-global-dimension-static-size-25)}
|
120
109
|
`;
|
121
110
|
export default styles;
|
122
|
-
//# sourceMappingURL=split-view.css.js.map
|
111
|
+
//# sourceMappingURL=split-view.css.js.map
|