Merge branch 'main' into #245-adjust-disabled-bread-crumb-color-when-…

…no-theme

app/ids-input/example.html

@@ -17,7 +17,7 @@
     <ids-input type="text" label="Email Address" placeholder="Company@address.com" validate="email required"></ids-input>
     <ids-input type="text" label="Disabled" disabled="true" value="Field not editable"></ids-input>
     <ids-input type="text" label="Readonly" readonly="true" value="02006"></ids-input>
-    <ids-input type="text" label="Dirty Tracking" dirty-tracker="true" placeholder="Dirty Tracking"></ids-input>
+    <ids-input type="text" label="Dirty Tracking" dirty-tracker="true" placeholder="Dirty Tracking" value="02006"></ids-input>
     <ids-input type="text" label="Clearable" placeholder="Clearable text Field" clearable="true"></ids-input>
     <ids-input type="text" label="Autoselect" value="Text select on focus" autoselect="true"></ids-input>
   </ids-layout-grid-cell>

app/ids-message/example.html

@@ -0,0 +1,19 @@
+<ids-message id="message-example-error" status="error">
+  <ids-text slot="title" font-size="24" type="h2" id="my-message-title">Lost connection</ids-text>
+  <ids-text id="my-message-contents" align="left">This application has experienced a system error due to the lack of internet access. Please restart the
+    application in order to proceed.</ids-text>
+  <ids-modal-button slot="buttons" type="secondary" id="my-message-cancel" cancel>Cancel</ids-modal-button>
+  <ids-modal-button slot="buttons" type="primary" id="my-message-confirm">Confirm</ids-modal-button>
+</ids-message>
+
+<ids-layout-grid auto="true">
+  <ids-layout-grid-cell>
+    <ids-text font-size="12" type="h1">Message</ids-text>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+<ids-layout-grid auto="true">
+  <ids-layout-grid-cell>
+    <ids-button type="secondary" id="message-example-error-trigger">Error Example</ids-button>
+  </ids-layout-grid-cell>
+</ids-layout-grid>

app/ids-message/example.js

@@ -0,0 +1,30 @@
+import IdsButton from '../../src/ids-button/ids-button';
+
+import './example.scss';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const triggerBtn = document.querySelector('#message-example-error-trigger');
+  const message = document.querySelector('#message-example-error');
+
+  // Link the Message to its trigger button
+  message.target = triggerBtn;
+  message.trigger = 'click';
+
+  // Setup the response callback
+  message.onButtonClick = (buttonEl) => {
+    const response = buttonEl.cancel ? 'cancelled' : 'confirmed';
+    console.info(`IdsMessage was ${response}`);
+    message.hide();
+  };
+
+  // Disable the trigger button when showing the Modal.
+  message.addEventListener('beforeshow', () => {
+    triggerBtn.disabled = true;
+    return true;
+  });
+
+  // After the modal is done hiding, re-enable its trigger button.
+  message.addEventListener('hide', () => {
+    triggerBtn.disabled = false;
+  });
+});

app/ids-message/example.scss

@@ -0,0 +1,4 @@
+#my-message-contents {
+  display: block;
+  max-width: 400px;
+}

app/ids-message/index.html

@@ -0,0 +1,3 @@
+{{> ../layouts/head.html }}
+{{> example.html }}
+{{> ../layouts/footer.html }}

app/ids-message/index.js

@@ -0,0 +1 @@
+import IdsMessage from '../../src/ids-message/ids-message';

app/ids-message/standalone-css.html

@@ -0,0 +1,37 @@
+{{> ../layouts/head-visible.html }}
+
+<link rel="stylesheet" href="ids-message.css" />
+<link rel="stylesheet" href="../ids-modal/ids-modal.css" />
+<link rel="stylesheet" href="../ids-overlay/ids-overlay.css" />
+<link rel="stylesheet" href="../ids-popup/ids-popup.css" />
+<link rel="stylesheet" href="../ids-button/ids-button.css" />
+<link rel="stylesheet" href="../ids-text/ids-text.css" />
+<link rel="stylesheet" href="../ids-icon/ids-icon.css" />
+<link rel="stylesheet" href="../ids-container/ids-container.css" />
+
+<div class="ids-modal ids-message" id="my-message">
+  <div class="ids-overlay visible"></div>
+  <div class="ids-popup modal visible open position-fixed" id="my-message-popup">
+    <div class="ids-modal-container content-wrapper">
+      <div class="ids-modal-header">
+        <svg class="ids-icon ids-message-status error" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="none" height="18"
+          width="18" viewBox="0 0 18 18" focusable="false" aria-hidden="true">
+          <path
+            d="M9 .5A8.5 8.5 0 0117.5 9 8.5 8.5 0 019 17.5 8.5 8.5 0 01.5 9 8.5 8.5 0 019 .5zm0 4.577v5.23m0 1.308v1.308"
+            stroke="currentColor" fill="none" fill-rule="evenodd" vector-effect="non-scaling-stroke"></path>
+        </svg>
+        <h2 class="ids-text ids-text-24">Lost Connection</h2>
+      </div>
+      <div class="ids-modal-content">
+        <span class="ids-text" id="my-message-contents">This application has experienced a system error due to the lack of internet access. Please restart the
+        application in order to proceed.</span>
+      </div>
+      <div class="ids-modal-footer">
+        <button class="ids-modal-button btn-secondary">Cancel</button>
+        <button class="ids-modal-button btn-primary">Confirm</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+{{> ../layouts/footer.html}}

app/ids-message/standalone-css.js

@@ -0,0 +1 @@
+import './standalone-css.scss';

app/ids-message/standalone-css.scss

@@ -0,0 +1,16 @@
+// In a CSS only Message/Modal, custom sizing/placement CSS is required
+// to create similar output to the WebComponent.
+
+// Position the Popup in the center of the page.
+// These sizes are specific to this demo's Popup.
+// Use your own sizing rules in place of these (or calculate them)
+#my-message-popup {
+  left: calc(50% - 220px);
+  top: calc(50% - 110px);
+}
+
+// Limit the contents' size
+#my-message-contents {
+  display: block;
+  max-width: 400px;
+}

app/ids-message/types.html

@@ -0,0 +1,125 @@
+{{> ../layouts/head.html }}
+
+<!-- Error Message -->
+<ids-message id="message-error" status="error">
+  <ids-text slot="title" font-size="24" type="h2" id="message-error-title">Lost connection</ids-text>
+  <ids-text class="demo-contents" align="left">This application has experienced a system error due to the lack of internet access.
+    Please restart the application in order to proceed.</ids-text>
+  <ids-modal-button slot="buttons" type="primary" id="message-error-ok">OK</ids-modal-button>
+</ids-message>
+
+<!-- Alert Message -->
+<ids-message id="message-alert" status="alert">
+  <ids-text slot="title" font-size="24" type="h2" id="message-alert-title">Application Alert</ids-text>
+  <ids-text class="demo-contents" align="left">This application has experienced a security alert. Please acknowledge the alert to proceed or cancel to abort.</ids-text>
+  <ids-modal-button slot="buttons" type="primary" id="message-alert-acknowledge">Acknowledge</ids-modal-button>
+  <ids-modal-button slot="buttons" type="secondary" id="message-alert-cancel" cancel>Cancel</ids-modal-button>
+</ids-message>
+
+<!-- Alert Message -->
+<ids-message id="message-success" status="success">
+  <ids-text slot="title" font-size="24" type="h2" id="message-success-title">Application Success</ids-text>
+  <ids-text class="demo-contents">Success! You've done the thing! Here's a <ids-hyperlink href="http://www.example.com" target="_blank">link</ids-hyperlink>.</ids-text>
+  <ids-modal-button slot="buttons" type="primary" id="message-success-ok">OK</ids-modal-button>
+</ids-message>
+
+<!-- Info Message -->
+<ids-message id="message-info" status="info">
+  <ids-text slot="title" font-size="24" type="h2" id="message-info-title">File Upload Complete</ids-text>
+  <ids-text class="demo-contents" align="left">Your file "<em>photo.png</em>" was successfully uploaded to your personal folder, and is now <strong>public for viewing</strong>.</ids-text>
+  <ids-modal-button slot="buttons" type="primary" id="message-info-done">Done</ids-modal-button>
+</ids-message>
+
+<!-- Default (Confirmation) Message -->
+<ids-message id="message-confirmation">
+  <ids-text slot="title" font-size="24" type="h2" id="message-confirmation-title">Delete this Application</ids-text>
+  <ids-text class="demo-contents" align="left">You are about to delete this application permanently.<br /><br />
+    Would you like to proceed?</ids-text>
+  <ids-modal-button slot="buttons" type="secondary" id="message-confirmation-yes">Yes</ids-modal-button>
+  <ids-modal-button slot="buttons" type="primary" id="message-confirmation-no" cancel>No</ids-modal-button>
+</ids-message>
+
+<!-- "No Buttons" Message -->
+<ids-message id="message-no-buttons">
+  <ids-text slot="title" font-size="24" type="h2" id="message-no-buttons-title">No Buttons</ids-text>
+  <ids-text class="demo-contents">No problem.</ids-text>
+</ids-message>
+
+<!-- "Allow Tags" Message (has HTML tags in the message that are bypassed by the XSS sanitizer) -->
+<ids-message id="message-allow-tags">
+  <ids-text slot="title" font-size="24" type="h2" id="message-allow-tags-title">Tags are present</ids-text>
+  <ids-text class="demo-contents" align="left">
+    <a href="#" class="hyperlink hide-focus longpress-target"><b>You</b> </a>have <br />allowed <br />any
+    <del>tags</del>
+    <em>to</em> <i>appear</i> <ins>in</ins> <mark>this</mark> <small>message</small>. <strong>All </strong>
+    <sub>are</sub>
+    <sup>default allowed</sup>.
+  </ids-text>
+  <ids-modal-button slot="buttons" type="primary" id="message-allow-tags-ok">OK</ids-modal-button>
+</ids-message>
+
+<!-- "Disallow Tags" Message (has the same tags as above, but they are stripped out by the sanitizer) -->
+<ids-message id="message-disallow-tags" xss-ignored-tags="">
+  <ids-text slot="title" font-size="24" type="h2" id="message-disallow-tags-title">Tags are NOT present</ids-text>
+  <ids-text class="demo-contents" align="left">
+    <a href="#" class="hyperlink hide-focus longpress-target"><b>You</b> </a>have <br />disallowed <br />any <del>tags</del>
+    <em>from</em> <i>appearing</i> <ins>in</ins> <mark>this</mark> <small>message</small>. <strong>All</strong>
+    <sub>are</sub> <sup>stripped</sup>.
+  </ids-text>
+  <ids-modal-button slot="buttons" type="primary" id="message-disallow-tags-ok">OK</ids-modal-button>
+</ids-message>
+
+<!-- In-page controls for the messages are below -->
+
+<ids-layout-grid auto="true">
+  <ids-layout-grid-cell>
+    <ids-text font-size="12" type="h1">Message Types</ids-text>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+<ids-layout-grid auto="true">
+  <ids-layout-grid-cell>
+    <ids-button type="secondary" id="message-error-trigger">Error Example</ids-button>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-button type="secondary" id="message-alert-trigger">Alert Example</ids-button>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-button type="secondary" id="message-success-trigger">Success Example</ids-button>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-button type="secondary" id="message-info-trigger">Info Example</ids-button>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-button type="secondary" id="message-confirmation-trigger">Confirmation Example</ids-button>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+<ids-layout-grid auto="true">
+  <ids-layout-grid-cell>
+    <ids-text font-size="12" type="h1">XSS Demos</ids-text>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+<ids-layout-grid auto="true">
+  <ids-layout-grid-cell>
+    <ids-button type="secondary" id="message-allow-tags-trigger">Allow Tags</ids-button>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-button type="secondary" id="message-disallow-tags-trigger">Disallow Tags</ids-button>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+<ids-layout-grid auto="true">
+  <ids-layout-grid-cell>
+    <ids-text font-size="12" type="h1">Other Types</ids-text>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+<ids-layout-grid auto="true">
+  <ids-layout-grid-cell>
+    <ids-button type="secondary" id="message-no-buttons-trigger">No Buttons</ids-button>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+{{> ../layouts/footer.html }}

app/ids-message/types.js

@@ -0,0 +1,75 @@
+import IdsMessage from '../../src/ids-message';
+import IdsModal, { IdsModalButton } from '../../src/ids-modal';
+
+// Supporting Components
+import IdsButton from '../../src/ids-button/ids-button';
+import IdsHyperlink from '../../src/ids-hyperlink/ids-hyperlink';
+
+import './types.scss';
+
+// Convenience function for setting up modal/trigger button connection
+const setupMessage = (messageEl, triggerBtnEl) => {
+  // Link the Message to its trigger button
+  messageEl.target = triggerBtnEl;
+  messageEl.trigger = 'click';
+
+  // Disable the trigger button when showing the Modal.
+  messageEl.addEventListener('beforeshow', () => {
+    triggerBtnEl.disabled = true;
+    return true;
+  });
+
+  // Setup the response callback
+  messageEl.onButtonClick = (buttonEl) => {
+    const response = buttonEl.cancel ? 'cancel' : buttonEl.text;
+    console.info(`IdsMessage with title "${messageEl.title}" had its "${response}" button clicked`);
+    messageEl.hide();
+  };
+
+  // After the modal is done hiding, re-enable its trigger button.
+  messageEl.addEventListener('hide', () => {
+    triggerBtnEl.disabled = false;
+  });
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Error Message
+  const messageErrorEl = document.querySelector('#message-error');
+  const messageErrorTriggerBtn = document.querySelector('#message-error-trigger');
+  setupMessage(messageErrorEl, messageErrorTriggerBtn);
+
+  // Alert Message
+  const messageAlertEl = document.querySelector('#message-alert');
+  const messageAlertTriggerBtn = document.querySelector('#message-alert-trigger');
+  setupMessage(messageAlertEl, messageAlertTriggerBtn);
+
+  // Success Message
+  const messageSuccessEl = document.querySelector('#message-success');
+  const messageSuccessTriggerBtn = document.querySelector('#message-success-trigger');
+  setupMessage(messageSuccessEl, messageSuccessTriggerBtn);
+
+  // Info Message
+  const messageInfoEl = document.querySelector('#message-info');
+  const messageInfoTriggerBtn = document.querySelector('#message-info-trigger');
+  setupMessage(messageInfoEl, messageInfoTriggerBtn);
+
+  // Default (Confirmation) Message
+  const messageConfEl = document.querySelector('#message-confirmation');
+  const messageConfTriggerBtn = document.querySelector('#message-confirmation-trigger');
+  setupMessage(messageConfEl, messageConfTriggerBtn);
+
+  // No Buttons Message
+  const messageNoButtonsEl = document.querySelector('#message-no-buttons');
+  const messageNoButtonsBtn = document.querySelector('#message-no-buttons-trigger');
+  setupMessage(messageNoButtonsEl, messageNoButtonsBtn);
+
+  // Allowed Tags Message
+  const messageAllowedTagsEl = document.querySelector('#message-allow-tags');
+  const messageAllowedTagsBtn = document.querySelector('#message-allow-tags-trigger');
+  setupMessage(messageAllowedTagsEl, messageAllowedTagsBtn);
+
+  // Disallowed Tags Message
+  const messageDisallowedTagsEl = document.querySelector('#message-disallow-tags');
+  const messageDisallowedTagsBtn = document.querySelector('#message-disallow-tags-trigger');
+  setupMessage(messageDisallowedTagsEl, messageDisallowedTagsBtn);
+});

app/ids-message/types.scss

@@ -0,0 +1,5 @@
+// Demo Container Contents
+.demo-contents {
+  display: block;
+  max-width: 400px;
+}

app/ids-modal/example.html

@@ -1,17 +1,9 @@
 <ids-modal id="my-modal" aria-labelledby="my-modal-title">
-  <ids-layout-grid>
-    <ids-text font-size="24" type="h2" id="my-modal-title">Active IDS Modal</ids-text>
-  </ids-layout-grid>
-  <ids-layout-grid>
-    <p>This is an active IDS Modal component</p>
-  </ids-layout-grid>
-  <ids-layout-grid auto="true">
-    <ids-layout-grid-cell>
-      <ids-button id="modal-close-btn" type="secondary">
-        <span slot="text">OK</span>
-      </ids-button>
-    </ids-layout-grid-cell>
-  </ids-layout-grid>
+  <ids-text slot="title" font-size="24" type="h2" id="my-modal-title">Active IDS Modal</ids-text>
+  <ids-modal-button slot="buttons" id="modal-close-btn" type="primary">
+    <span slot="text">OK</span>
+  </ids-modal-button>
+  <p align="left">This is an active IDS Modal component</p>
 </ids-modal>
 
 <ids-layout-grid>

app/ids-modal/example.js

@@ -1,14 +1,14 @@
 // Supporting Components
-import IdsButton from '../../src/ids-button/ids-button';
+import IdsModalButton from '../../src/ids-modal-button';
 
 document.addEventListener('DOMContentLoaded', () => {
   const triggerId = '#modal-trigger-btn';
   const triggerBtn = document.querySelector(triggerId);
   const modal = document.querySelector('ids-modal');
-  const modalCloseBtn = modal.querySelector('ids-button');
 
   // Links the Modal to its trigger button (sets up click/focus events)
   modal.target = triggerBtn;
+  modal.trigger = 'click';
 
   // Disable the trigger button when showing the Modal.
   modal.addEventListener('beforeshow', () => {
@@ -17,9 +17,9 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   // Close the modal when its inner button is clicked.
-  modalCloseBtn.addEventListener('click', () => {
+  modal.onButtonClick = () => {
     modal.hide();
-  });
+  };
 
   // After the modal is done hiding, re-enable its trigger button.
   modal.addEventListener('hide', () => {

app/ids-modal/index.js

@@ -1 +1 @@
-import IdsModal from '../../src/ids-modal/ids-modal';
+import IdsModal from '../../src/ids-modal';