fix: working on fixing dialog. wip

Author: hperrin

packages/dialog/Dialog.svelte

@@ -5,6 +5,7 @@
   class="mdc-dialog {className}"
   role="alertdialog"
   aria-modal="true"
+  on:MDCDialog:opened={handleDialogOpened}
   {...exclude($$props, ['use', 'class'])}
 >
   <div class="mdc-dialog__container">
@@ -17,7 +18,7 @@
 
 <script>
   import {MDCDialog} from '@material/dialog';
-  import {onMount, onDestroy} from 'svelte';
+  import {onMount, onDestroy, setContext} from 'svelte';
   import {current_component} from 'svelte/internal';
   import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
   import {exclude} from '@smui/common/exclude.js';
@@ -34,6 +35,10 @@
 
   let element;
   let dialog;
+  let layoutListeners = [];
+  let addLayoutListener = listener => layoutListeners.push(listener);
+
+  setContext('SMUI:addLayoutListener', addLayoutListener);
 
   $: dialog && (dialog.escapeKeyAction = escapeKeyAction);
   $: dialog && (dialog.scrimClickAction = scrimClickAction);
@@ -47,6 +52,10 @@
     dialog && dialog.destroy()
   });
 
+  function handleDialogOpened() {
+    layoutListeners.forEach(listener => listener());
+  }
+
   export function open(...args) {
     return dialog.open(...args);
   }

packages/slider/Slider.svelte

@@ -61,6 +61,7 @@
   let slider;
   let formField = getContext('SMUI:form-field');
   let inputProps = getContext('SMUI:generic:input:props') || {};
+  let addLayoutListener = getContext('SMUI:addLayoutListener');
 
   $: if (slider && slider.disabled !== disabled) {
     slider.disabled = disabled;
@@ -82,6 +83,10 @@
     slider.value = value;
   }
 
+  if (addLayoutListener) {
+    addLayoutListener(layout);
+  }
+
   onMount(() => {
     slider = new MDCSlider(element);
 

site/src/routes/demo/dialog.svelte

@@ -110,23 +110,64 @@
   </div>
 
   <pre class="status">Selected: {selected}</pre>
+
+  <div>
+    A dialog with sliders: <br />
+
+    <Dialog bind:this={sliderDialog} aria-labelledby="slider-title" aria-describedby="slider-content">
+      <Title id="slider-title">Volumes</Title>
+      <Content id="slider-content">
+        <div>
+          <FormField align="end" style="display: flex; flex-direction: column;">
+            <Slider bind:value={volumeMedia} use={[InitialFocus]} />
+            <span slot="label">Media Volume</span>
+          </FormField>
+        </div>
+        <div>
+          <FormField align="end" style="display: flex; flex-direction: column;">
+            <Slider bind:value={volumeRingtone} />
+            <span slot="label">Ringtone Volume</span>
+          </FormField>
+        </div>
+        <div>
+          <FormField align="end" style="display: flex; flex-direction: column;">
+            <Slider bind:value={volumeAlarm} />
+            <span slot="label">Alarm Volume</span>
+          </FormField>
+        </div>
+      </Content>
+      <Actions>
+        <Button action="accept">
+          <Label>Done</Label>
+        </Button>
+      </Actions>
+    </Dialog>
+
+    <Button on:click={() => sliderDialog.open()}><Label>Open Dialog</Label></Button>
+  </div>
 </section>
 
 <script>
   import Dialog, {Title, Content, Actions, InitialFocus} from '@smui/dialog';
   import Button, {Label} from '@smui/button';
   import List, {Item, Graphic, Text} from '@smui/list';
   import Radio from '@smui/radio';
+  import Slider from '@smui/slider';
+  import FormField from '@smui/form-field';
 
   let simpleDialog;
   let eventDialog;
   let listDialog;
   let listSelectionDialog;
+  let sliderDialog;
   let clicked = 'Nothing yet.';
   let response = 'Nothing yet.';
   let clickedList = 'Nothing yet.';
   let selection = 'Radishes';
   let selected = 'Nothing yet.';
+  let volumeMedia = 100;
+  let volumeRingtone = 80;
+  let volumeAlarm = 80;
 
   function closeHandler(e) {
     switch (e.detail.action) {