npm - @salesforce-ux/design-system - Versions diffs - 2.266.0-beta.3 → 2.266.0-beta.4 - Mend

@salesforce-ux/design-system 2.266.0-beta.3 → 2.266.0-beta.4

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.

Files changed (975) hide show

package/__internal/chunked/docs/ui/components/chat/docs.mdx.js CHANGED Viewed

package/__internal/chunked/docs/ui/components/checkbox/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,r,i={6554:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return A},getElement:function(){return q}});var i=r(1594),n=r.n(i),l=r(5671),o=r(6547),a=(r(7675),r(5619),r(6390)),c=r(9741),s=r(3589),d=r(1069),u=r(2711),h=r(538),m=n().createElement(d.L,null),b=[{id:"checked",label:"Checked",element:n().createElement(d.L,{isChecked:!0})},{id:"disabled",label:"Disabled",element:n().createElement(d.L,{isDisabled:!0})},{id:"checked-disabled",label:"Checked and Disabled",element:n().createElement(d.L,{isChecked:!0,isDisabled:!0})},{id:"error",label:"Error",element:n().createElement(d.L,{isRequired:!0,hasError:!0,inlineMessage:"This field is required"})},{id:"required",label:"Required",element:n().createElement(d.L,{isRequired:!0})},{id:"view-mode-unchecked",label:"View mode - Unchecked",element:n().createElement(u.ZS,{labelContent:"Form Element Label",isViewMode:!0},n().createElement(h.eX,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}))},{id:"view-mode-checked",label:"View mode - Checked",element:n().createElement(u.ZS,{labelContent:"Form Element Label",isViewMode:!0},n().createElement(h.eX,{symbol:"check",size:"x-small",useCurrentColor:!0,assistiveText:"True",title:"True"}))}],p=[{id:"help-text-icon",label:"Help text icon",element:n().createElement(d.L,{hasTooltip:!0})},{id:"required-help-text-icon",label:"Required with Help text icon",element:n().createElement(d.L,{isRequired:!0,hasTooltip:!0})},{id:"required-help-text-icon-tooltip",label:"Required with Help text icon, showing tooltip",element:n().createElement("div",{style:{paddingTop:"3rem"}},n().createElement(d.L,{isRequired:!0,hasTooltip:!0,showTooltip:!0}))}],f=r(6482),x=r(9285),k=l.XB.a,E=l.XB.code,y=l.XB.h2,O=l.XB.h3,v=l.XB.h4,g=l.XB.h5,w=l.XB.p,q=function(){return(0,i.createElement)(l.Ay,{},(0,i.createElement)("div",{className:"doc lead"},"A checkable input that communicates if an option is true, false or indeterminate"),(0,i.createElement)(o.A,{exampleOnly:!0},(0,f.NO)(s.hb)),y({id:"About-Checkbox"},"About Checkbox"),w({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),O({id:"Accessibility"},"Accessibility"),w({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),w({},"Custom checkboxes are created by applying the ",E({},".slds-checkbox")," class to a ",E({},"<label>")," element. To remain accessible to all user agents, place ",E({},"<input>")," with ",E({},'type="checkbox"')," inside the ",E({},"<label>")," element. The ",E({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",E({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",E({},".slds-form-element__label")," contains the label text."),w({},"When a single checkbox is required, ",E({},'<div class="slds-checkbox">')," should get ",E({},'<abbr class="required" title="required" aria-hidden="true"></abbr>')," added to the DOM, directly before the ",E({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),w({},"When a checkbox group is required, the ",E({},"<fieldset>")," should receive the class ",E({},".slds-is-required"),". The ",E({},"<legend>")," should then get ",E({},'<abbr class="required" title="required" aria-hidden="true"></abbr>')," added to the DOM for visual indication that the checkbox group is required."),w({},"Example:\n",(0,i.createElement)(c.A,null)),w({},"As SLDS checkboxes rely on the ",E({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),O({id:"Mobile"},"Mobile"),(0,i.createElement)(x.s9,{patternSpecificText:"checkboxes will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as having larger label text"}),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for checkboxes"},(0,f.NO)(s.hb)),y({id:"Base"},"Base"),w({},"The base variant of a checkbox is a single boolean value. The base checkbox is consumed by both a grouped checkbox and a checkbox within a form element."),w({},"The ",k({href:"#Form-Element"},"form element variant")," accommodates a top level label and additional functionality such as like help text and read only mode. Help text is not supported on a single checkbox."),(0,i.createElement)(o.A,null,(0,f.NO)(s.hb)),O({id:"States"},"States"),v({id:"Required"},"Required"),(0,i.createElement)(o.A,null,(0,f.NO)(s.xP,"required")),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Required checkbox example"},(0,f.NO)(s.xP,"required")),v({id:"Error"},"Error"),(0,i.createElement)(o.A,null,(0,f.NO)(s.xP,"error")),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Checkbox in error state example"},(0,f.NO)(s.xP,"error")),v({id:"Disabled"},"Disabled"),(0,i.createElement)(o.A,null,(0,f.NO)(s.xP,"disabled")),g({id:"Checked-and-Disabled"},"Checked and Disabled"),(0,i.createElement)(o.A,null,(0,f.NO)(s.xP,"checked-and-disabled")),O({id:"Examples"},"Examples"),v({id:"Group"},"Group"),(0,i.createElement)(o.A,null,(0,f.NO)(s.K1,"group")),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Group checkbox example"},(0,f.NO)(s.K1,"group")),g({id:"Required-2"},"Required"),(0,i.createElement)(o.A,null,(0,f.NO)(s.K1,"group-required")),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Required group checkbox example"},(0,f.NO)(s.K1,"group-required")),g({id:"Error-2"},"Error"),(0,i.createElement)(o.A,null,(0,f.NO)(s.K1,"group-error")),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Group error checkbox example"},(0,f.NO)(s.K1,"group-error")),g({id:"Disabled-2"},"Disabled"),(0,i.createElement)(o.A,null,(0,f.NO)(s.K1,"group-disabled")),v({id:"RTL-(right-to-left-direction)"},"RTL (right to left direction)"),(0,i.createElement)(o.A,null,(0,f.NO)(s.K1,"rtl")),y({id:"Form-Element"},"Form Element"),(0,i.createElement)(o.A,null,(0,f.NO)(m)),O({id:"States-2"},"States"),v({id:"Checked"},"Checked"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"checked")),v({id:"Disabled-3"},"Disabled"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"disabled")),v({id:"Checked-and-Disabled-2"},"Checked and Disabled"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"checked-disabled")),v({id:"Error-3"},"Error"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"error")),v({id:"Required-3"},"Required"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"required")),O({id:"View-mode"},"View mode"),w({},"View mode is the read only state of a checkbox form element."),v({id:"Unchecked"},"Unchecked"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"view-mode-unchecked")),v({id:"Checked-2"},"Checked"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"view-mode-checked")),O({id:"Examples-2"},"Examples"),v({id:"With-help-text"},"With help text"),(0,i.createElement)(o.A,null,(0,f.NO)(p,"help-text-icon")),v({id:"Required-with-help-text"},"Required with help text"),(0,i.createElement)(o.A,null,(0,f.NO)(p,"required-help-text-icon")),v({id:"Required-with-help-text-with-tooltip"},"Required with help text with tooltip"),(0,i.createElement)(o.A,null,(0,f.NO)(p,"required-help-text-icon-tooltip")),y({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,i.createElement)(a.A,{name:"checkbox",type:"component"}))},A=function(){return(0,l.Qr)(q())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},n={};function l(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={id:e,exports:{}};return i[e](r,r.exports,l),r.exports}l.m=i,l.amdO={},e=[],l.O=function(t,r,i,n){if(!r){var o=1/0;for(d=0;d<e.length;d++){r=e[d][0],i=e[d][1],n=e[d][2];for(var a=!0,c=0;c<r.length;c++)1&n&&!(o>=n)\|\|!Object.keys(l.O).every(function(e){return l.O[e](r[c])})?(a=!1,n<o&&(o=n)):r.splice(c--,1);if(a){e.splice(d--,1);var s=i();void 0!==s&&(t=s)}}return t}n=n\|\|0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[r,i,n]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},l.cw=function(e){var t;return function(){if(e){var r=e;e=0,t={exports:{}},r.call(t.exports,t,t.exports)}return t.exports}},r=Object.getPrototypeOf,l.t=function(e,i){if(1&i&&(e=this(e)),8&i)return e;if("object"==typeof e&&e){if(4&i&&e.__esModule)return e;if(16&i&&"function"==typeof e.then)return e}var n=Object.create(null);l.r(n);var o={};t=t\|\|[null,r({}),r([]),r(r)];for(var a=2&i&&e;("object"==typeof a\|\|"function"==typeof a)&&!~t.indexOf(a);a=r(a))Object.getOwnPropertyNames(a).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},l.d(n,o),n},l.d=function(e,t){for(var r in t)l.o(t,r)&&!l.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=5164,function(){var e={5164:0};l.O.j=function(t){return 0===e[t]};var t=function(t,r){var i,n,o=r[0],a=r[1],c=r[2],s=0;if(o.some(function(t){return 0!==e[t]})){for(i in a)l.o(a,i)&&(l.m[i]=a[i]);if(c)var d=c(l)}for(t&&t(r);s<o.length;s++)n=o[s],l.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return l.O(d)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),l.nc=void 0;var o=l.O(void 0,[3540],function(){return l(6554)});o=l.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/checkbox/docs.mdx.js"]=o}();
1	+ var SLDS;!function(){"use strict";var e,t,r,i={6554:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return A},getElement:function(){return q}});var i=r(1594),n=r.n(i),l=r(5671),o=r(6547),a=(r(7675),r(5619),r(6390)),c=r(9741),s=r(3589),d=r(1069),u=r(2711),h=r(538),m=n().createElement(d.L,null),b=[{id:"checked",label:"Checked",element:n().createElement(d.L,{isChecked:!0})},{id:"disabled",label:"Disabled",element:n().createElement(d.L,{isDisabled:!0})},{id:"checked-disabled",label:"Checked and Disabled",element:n().createElement(d.L,{isChecked:!0,isDisabled:!0})},{id:"error",label:"Error",element:n().createElement(d.L,{isRequired:!0,hasError:!0,inlineMessage:"This field is required"})},{id:"required",label:"Required",element:n().createElement(d.L,{isRequired:!0})},{id:"view-mode-unchecked",label:"View mode - Unchecked",element:n().createElement(u.ZS,{labelContent:"Form Element Label",isViewMode:!0},n().createElement(h.eX,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}))},{id:"view-mode-checked",label:"View mode - Checked",element:n().createElement(u.ZS,{labelContent:"Form Element Label",isViewMode:!0},n().createElement(h.eX,{symbol:"check",size:"x-small",useCurrentColor:!0,assistiveText:"True",title:"True"}))}],p=[{id:"help-text-icon",label:"Help text icon",element:n().createElement(d.L,{hasTooltip:!0})},{id:"required-help-text-icon",label:"Required with Help text icon",element:n().createElement(d.L,{isRequired:!0,hasTooltip:!0})},{id:"required-help-text-icon-tooltip",label:"Required with Help text icon, showing tooltip",element:n().createElement("div",{style:{paddingTop:"3rem"}},n().createElement(d.L,{isRequired:!0,hasTooltip:!0,showTooltip:!0}))}],f=r(6482),x=r(9285),k=l.XB.a,E=l.XB.code,y=l.XB.h2,O=l.XB.h3,g=l.XB.h4,v=l.XB.h5,w=l.XB.p,q=function(){return(0,i.createElement)(l.Ay,{},(0,i.createElement)("div",{className:"doc lead"},"A checkable input that communicates if an option is true, false or indeterminate"),(0,i.createElement)(o.A,{exampleOnly:!0},(0,f.NO)(s.hb)),y({id:"About-Checkbox"},"About Checkbox"),w({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),O({id:"Accessibility"},"Accessibility"),w({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),w({},"Custom checkboxes are created by applying the ",E({},".slds-checkbox")," class to a ",E({},"<label>")," element. To remain accessible to all user agents, place ",E({},"<input>")," with ",E({},'type="checkbox"')," inside the ",E({},"<label>")," element. The ",E({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",E({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",E({},".slds-form-element__label")," contains the label text."),w({},"When a single checkbox is required, ",E({},'<div class="slds-checkbox">')," should get ",E({},'<abbr class="required" title="required" aria-hidden="true"></abbr>')," added to the DOM, directly before the ",E({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),w({},"When a checkbox group is required, the ",E({},"<fieldset>")," should receive the class ",E({},".slds-is-required"),". The ",E({},"<legend>")," should then get ",E({},'<abbr class="required" title="required" aria-hidden="true"></abbr>')," added to the DOM for visual indication that the checkbox group is required."),w({},"Example:\n",(0,i.createElement)(c.A,null)),w({},"As SLDS checkboxes rely on the ",E({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),O({id:"Mobile"},"Mobile"),(0,i.createElement)(x.s9,{patternSpecificText:"checkboxes will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as having larger label text"}),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for checkboxes"},(0,f.NO)(s.hb)),y({id:"Base"},"Base"),w({},"The base variant of a checkbox is a single boolean value. The base checkbox is consumed by both a grouped checkbox and a checkbox within a form element."),w({},"The ",k({href:"#Form-Element"},"form element variant")," accommodates a top level label and additional functionality such as like help text and read only mode. Help text is not supported on a single checkbox."),(0,i.createElement)(o.A,null,(0,f.NO)(s.hb)),O({id:"States"},"States"),g({id:"Required"},"Required"),(0,i.createElement)(o.A,null,(0,f.NO)(s.xP,"required")),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Required checkbox example"},(0,f.NO)(s.xP,"required")),g({id:"Error"},"Error"),(0,i.createElement)(o.A,null,(0,f.NO)(s.xP,"error")),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Checkbox in error state example"},(0,f.NO)(s.xP,"error")),g({id:"Disabled"},"Disabled"),(0,i.createElement)(o.A,null,(0,f.NO)(s.xP,"disabled")),v({id:"Checked-and-Disabled"},"Checked and Disabled"),(0,i.createElement)(o.A,null,(0,f.NO)(s.xP,"checked-and-disabled")),O({id:"Examples"},"Examples"),g({id:"Group"},"Group"),(0,i.createElement)(o.A,null,(0,f.NO)(s.K1,"group")),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Group checkbox example"},(0,f.NO)(s.K1,"group")),v({id:"Required-2"},"Required"),(0,i.createElement)(o.A,null,(0,f.NO)(s.K1,"group-required")),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Required group checkbox example"},(0,f.NO)(s.K1,"group-required")),v({id:"Error-2"},"Error"),(0,i.createElement)(o.A,null,(0,f.NO)(s.K1,"group-error")),(0,i.createElement)(o.A,{frameOnly:!0,frameTitle:"Group error checkbox example"},(0,f.NO)(s.K1,"group-error")),v({id:"Disabled-2"},"Disabled"),(0,i.createElement)(o.A,null,(0,f.NO)(s.K1,"group-disabled")),g({id:"RTL-(right-to-left-direction)"},"RTL (right to left direction)"),(0,i.createElement)(o.A,null,(0,f.NO)(s.K1,"rtl")),y({id:"Form-Element"},"Form Element"),(0,i.createElement)(o.A,null,(0,f.NO)(m)),O({id:"States-2"},"States"),g({id:"Checked"},"Checked"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"checked")),g({id:"Disabled-3"},"Disabled"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"disabled")),g({id:"Checked-and-Disabled-2"},"Checked and Disabled"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"checked-disabled")),g({id:"Error-3"},"Error"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"error")),g({id:"Required-3"},"Required"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"required")),O({id:"View-mode"},"View mode"),w({},"View mode is the read only state of a checkbox form element."),g({id:"Unchecked"},"Unchecked"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"view-mode-unchecked")),g({id:"Checked-2"},"Checked"),(0,i.createElement)(o.A,null,(0,f.NO)(b,"view-mode-checked")),O({id:"Examples-2"},"Examples"),g({id:"With-help-text"},"With help text"),(0,i.createElement)(o.A,null,(0,f.NO)(p,"help-text-icon")),g({id:"Required-with-help-text"},"Required with help text"),(0,i.createElement)(o.A,null,(0,f.NO)(p,"required-help-text-icon")),g({id:"Required-with-help-text-with-tooltip"},"Required with help text with tooltip"),(0,i.createElement)(o.A,null,(0,f.NO)(p,"required-help-text-icon-tooltip")),y({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,i.createElement)(a.A,{name:"checkbox",type:"component"}))},A=function(){return(0,l.Qr)(q())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},n={};function l(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={id:e,exports:{}};return i[e](r,r.exports,l),r.exports}l.m=i,l.amdO={},e=[],l.O=function(t,r,i){if(!r){for(var n=0;n<e.length;n++){r=e[n][0],i=e[n][1];for(var o=!0,a=0;a<r.length;a++)l.O.j(r[a])?r.splice(a--,1):o=!1;if(o){e.splice(n--,1);var c=i();void 0!==c&&(t=c)}}return t}e.push([r,i])},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},l.cw=function(e){var t;return function(){if(e){var r=e;e=0,t={exports:{}},r.call(t.exports,t,t.exports)}return t.exports}},r=Object.getPrototypeOf,l.t=function(e,i){if(1&i&&(e=this(e)),8&i)return e;if("object"==typeof e&&e){if(4&i&&e.__esModule)return e;if(16&i&&"function"==typeof e.then)return e}var n=Object.create(null);l.r(n);var o={};t=t\|\|[null,r({}),r([]),r(r)];for(var a=2&i&&e;("object"==typeof a\|\|"function"==typeof a)&&!~t.indexOf(a);a=r(a))Object.getOwnPropertyNames(a).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},l.d(n,o),n},l.d=function(e,t){for(var r in t)l.o(t,r)&&!l.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=5164,function(){var e={5164:0};l.O.j=function(t){return 0===e[t]};var t=function(t,r){var i,n,o=r[0],a=r[1],c=r[2],s=0;if(o.some(function(t){return 0!==e[t]})){for(i in a)l.o(a,i)&&(l.m[i]=a[i]);if(c)var d=c(l)}for(t&&t(r);s<o.length;s++)n=o[s],l.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return l.O(d)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),l.nc=void 0;var o=l.O(void 0,[3540],function(){return l(6554)});o=l.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/checkbox/docs.mdx.js"]=o}();

package/__internal/chunked/docs/ui/components/checkbox-button/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,n,o={598:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return L},getElement:function(){return U}});var o=n(1594),c=n.n(o),i=n(5671),r=n(4187),a=n.n(r),s=n(1369),l=n.n(s),u=n(6482),d=n(538);function b(e){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},b(e)}function h(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,f(o.key),o)}}function f(e){var t=function(e){if("object"!=b(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=b(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==b(t)?t:t+""}function p(e,t){return p=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},p(e,t)}function m(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(m=function(){return!!e})()}function k(e){return k=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},k(e)}var y=function(e){var t=e.isFocused,n=e.isDisabled,o=e.isChecked,i=e.tabIndex,r=e.iconAssistiveText,a=e.iconSize,s=e.iconSymbol,b=e.iconCurrentColor,h=e.onChange,f=e.onFocus,p=e.onBlur,m=u.Ay.uniqueId("example-unique-id-"),k={"slds-checkbox-button_is-focused":t,"slds-checkbox-button_is-checked":o,"slds-checkbox-button_is-disabled":n};return c().createElement("label",{className:l()("slds-checkbox-button",k),htmlFor:m},c().createElement("input",{className:"slds-assistive-text",type:"checkbox",id:m,value:m,disabled:n,defaultChecked:o,tabIndex:i,onChange:h,onFocus:f,onBlur:p}),c().createElement(d.eX,{symbol:s,size:a,useCurrentColor:b,assistiveText:r}))};y.defaultProps={iconAssistiveText:"Add product",iconSize:"x-small",iconSymbol:"add",iconCurrentColor:!0},y.propTypes={isDisabled:a().bool,isChecked:a().bool,tabIndex:a().number,iconAssistiveText:a().string,iconSize:a().string,iconSymbol:a().string,iconCurrentColor:a().bool};var x=function(e){function t(e){var n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(n=function(e,t,n){return t=k(t),function(e,t){if(t&&("object"==b(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,m()?Reflect.construct(t,n\|\|[],k(e).constructor):t.apply(e,n))}(this,t,[e])).state={checked:!!n.props.isChecked,focused:!1},n.handleCheckboxChange=n.handleCheckboxChange.bind(n),n.handleFocus=n.handleFocus.bind(n),n.handleBlur=n.handleBlur.bind(n),n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&p(e,t)}(t,e),n=t,(o=[{key:"handleCheckboxChange",value:function(){this.setState({checked:!this.state.checked})}},{key:"handleFocus",value:function(){this.state.focused\|\|this.setState({focused:!0})}},{key:"handleBlur",value:function(){this.state.focused&&this.setState({focused:!1})}},{key:"render",value:function(){var e=this.props,t=e.iconChecked,n=e.iconUnchecked,o=e.isDisabled,i=e.tabIndex;return c().createElement(y,{onChange:this.handleCheckboxChange,iconSymbol:this.state.checked?t:n,isChecked:this.state.checked,isDisabled:o,isFocused:this.state.focused,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:i})}}])&&h(n.prototype,o),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,o}(o.Component);x.defaultProps={iconChecked:"check",iconUnchecked:"add"},x.propTypes={iconChecked:a().string,iconUnchecked:a().string};var v=function(e){var t=e.disabled,n=e.checked,o=e.tabIndex,i=e.label,r=u.Ay.uniqueId("add-checkbox-");return c().createElement("div",{className:"slds-checkbox_add-button"},c().createElement("input",{className:"slds-assistive-text",type:"checkbox",id:r,value:r,disabled:t,defaultChecked:n,tabIndex:o}),c().createElement("label",{htmlFor:r,className:"slds-checkbox_faux"},c().createElement("span",{className:"slds-assistive-text"},i\|\|"Add product")))},g=c().createElement(x,null),C=[{id:"checkbox-button-checked",label:"Checked",element:c().createElement(x,{isChecked:!0})},{id:"checkbox-button-disabled",label:"Disabled",element:c().createElement(x,{isDisabled:!0})},{id:"checkbox-button-checked-disabled",label:"Checked and Disabled",element:c().createElement(x,{isChecked:!0,isDisabled:!0})},{id:"checkbox-add-button-checked",label:"Deprecated - Checked",element:c().createElement(v,{checked:!0})},{id:"checkbox-add-button-disabled",label:"Deprecated - Disabled",element:c().createElement(v,{disabled:!0})},{id:"checkbox-add-button-checked-and-disabled",label:"Deprecated - Checked and Disabled",element:c().createElement(v,{checked:!0,disabled:!0})}],_=[{id:"checkbox-button-icon-symbol",label:"Different Icon",element:c().createElement(x,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full"})},{id:"checkbox-button-checked-icon-symbol",label:"Different Icon - Checked",element:c().createElement(x,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full",isChecked:!0})},{id:"checkbox-button-disabled-icon-symbol",label:"Different Icon - Disabled",element:c().createElement(x,{iconUnchecked:"recycle_bin_empty",isDisabled:!0})},{id:"checkbox-button-checked-disabled-icon-symbol",label:"Different Icon - Checked and Disabled",element:c().createElement(x,{iconChecked:"recycle_bin_full",isChecked:!0,isDisabled:!0})}],O=n(6547),S=n(9285),E=i.XB.a,w=i.XB.code,D=i.XB.h2,j=i.XB.h3,B=i.XB.li,T=i.XB.p,A=i.XB.table,I=i.XB.tbody,P=i.XB.td,N=i.XB.th,X=i.XB.thead,F=i.XB.tr,M=i.XB.ul,U=function(){return(0,o.createElement)(i.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"A styled checkable input that communicates if an option is being added to a group"),(0,o.createElement)(O.A,{exampleOnly:!0},(0,u.NO)(g)),D({id:"About-Checkbox-Button"},"About Checkbox Button"),T({},"The checkbox button is similar to a checkbox in that it presents a user with a\nbinary choice for an item. However, the only action a user can take is to\nadd (or remove) an entity. When a user clicks the checkbox button, the entity is\nstored, similar to an ‘add to cart’ experience, until the user saves changes."),T({},"The checkbox button is useful for increasing clarity. Since the button only adds\nor removes entities, the user knows the action they will prompt upon click.\nThe checkbox button also provides a clear visual affordance and a large target to take this action."),T({},"Use the add button if the component you’re building:"),M({},B({},"Exists without other multi-select elements (i.e. checkboxes)"),B({},"Allows users to select multiple entities"),B({},"Semantically fits the add/remove model")),D({id:"Structure-and-Implementation"},"Structure and Implementation"),T({},"The checkbox ",w({},"<input>")," is visually hidden with ",w({},".slds-assistive-text")," and a faux checkbox is created using the ",E({href:"/components/icons"},"icon blueprint")," which allows the display of an icon instead of the standard checkbox."),T({},"Click and tap events are captured by a ",w({},"<label>")," that encases the entire blueprint. The ",w({},"for")," attribute of your ",w({},"<label>")," must match the ",w({},"id")," attribute of your ",w({},"<input>"),"."),T({},"The states of the checkbox button are styled with the following classes:"),A({},X({},F({},N({},"Class"),N({},"State"),N({},"Description"))),I({},F({},P({},w({},".slds-checkbox-button_is-checked")),P({},"checked"),P({},"The checked state when the checkbox button has been selected")),F({},P({},w({},".slds-checkbox-button_is-disabled")),P({},"disabled"),P({},"The disabled state when the checkbox button has been disabled")),F({},P({},w({},".slds-checkbox-button_is-focused")),P({},"focused"),P({},"The focused state when the checkbox button has focus; important for accessibility")))),T({},"When implementing this blueprint, monitor the state of the checkbox ",w({},"<input>")," and apply the appropriate state class listed in the above chart based on the current state of the checkbox ",w({},"<input>"),"."),T({},"It is possible to change the icon used within the checkbox button, see ",E({href:"#different-icon"},"Different Icons")," for more details."),j({id:"Mobile"},"Mobile"),(0,o.createElement)(S.s9,{patternSpecificText:"checkbox buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,o.createElement)(O.A,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox buttons"},(0,u.NO)(g)),D({id:"Base"},"Base"),(0,o.createElement)(O.A,null,(0,u.NO)(g)),D({id:"States"},"States"),j({id:"Checked"},"Checked"),(0,o.createElement)(O.A,null,(0,u.NO)(C,"checkbox-button-checked")),j({id:"Disabled"},"Disabled"),(0,o.createElement)(O.A,null,(0,u.NO)(C,"checkbox-button-disabled")),j({id:"Checked-and-Disabled"},"Checked and Disabled"),(0,o.createElement)(O.A,null,(0,u.NO)(C,"checkbox-button-checked-disabled")),D({id:"Examples"},"Examples"),j({id:"Different-Icon"},"Different Icon"),T({},"You may change the utility icon used by the checkbox button depending on the action you are communicating. Reference the ",E({href:"/icons/#utility"},"utility icon listing")," for all available options."),T({},"This example is using the ",w({},"recycle_bin_empty")," utility icon as its base state and the ",w({},"recycle_bin_full")," utility icon as its checked state."),(0,o.createElement)(O.A,null,(0,u.NO)(_,"checkbox-button-icon-symbol")),(0,o.createElement)(O.A,null,(0,u.NO)(_,"checkbox-button-checked-icon-symbol")))},L=function(){return(0,i.Qr)(U())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},c={};function i(e){var t=c[e];if(void 0!==t)return t.exports;var n=c[e]={id:e,exports:{}};return o[e](n,n.exports,i),n.exports}i.m=o,i.amdO={},e=[],i.O=function(t,n,o,c){if(!n){var r=1/0;for(u=0;u<e.length;u++){n=e[u][0],o=e[u][1],c=e[u][2];for(var a=!0,s=0;s<n.length;s++)1&c&&!(r>=c)\|\|!Object.keys(i.O).every(function(e){return i.O[e](n[s])})?(a=!1,c<r&&(r=c)):n.splice(s--,1);if(a){e.splice(u--,1);var l=o();void 0!==l&&(t=l)}}return t}c=c\|\|0;for(var u=e.length;u>0&&e[u-1][2]>c;u--)e[u]=e[u-1];e[u]=[n,o,c]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},i.cw=function(e){var t;return function(){if(e){var n=e;e=0,t={exports:{}},n.call(t.exports,t,t.exports)}return t.exports}},n=Object.getPrototypeOf,i.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var c=Object.create(null);i.r(c);var r={};t=t\|\|[null,n({}),n([]),n(n)];for(var a=2&o&&e;("object"==typeof a\|\|"function"==typeof a)&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},i.d(c,r),c},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=785,function(){var e={785:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var o,c,r=n[0],a=n[1],s=n[2],l=0;if(r.some(function(t){return 0!==e[t]})){for(o in a)i.o(a,o)&&(i.m[o]=a[o]);if(s)var u=s(i)}for(t&&t(n);l<r.length;l++)c=r[l],i.o(e,c)&&e[c]&&e[c][0](),e[c]=0;return i.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),i.nc=void 0;var r=i.O(void 0,[3540],function(){return i(598)});r=i.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/checkbox-button/docs.mdx.js"]=r}();
1	+ var SLDS;!function(){"use strict";var e,t,n,o={598:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return L},getElement:function(){return U}});var o=n(1594),c=n.n(o),i=n(5671),r=n(4187),a=n.n(r),s=n(1369),l=n.n(s),u=n(6482),d=n(538);function b(e){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},b(e)}function h(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,f(o.key),o)}}function f(e){var t=function(e){if("object"!=b(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=b(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==b(t)?t:t+""}function p(e,t){return p=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},p(e,t)}function m(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(m=function(){return!!e})()}function k(e){return k=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},k(e)}var y=function(e){var t=e.isFocused,n=e.isDisabled,o=e.isChecked,i=e.tabIndex,r=e.iconAssistiveText,a=e.iconSize,s=e.iconSymbol,b=e.iconCurrentColor,h=e.onChange,f=e.onFocus,p=e.onBlur,m=u.Ay.uniqueId("example-unique-id-"),k={"slds-checkbox-button_is-focused":t,"slds-checkbox-button_is-checked":o,"slds-checkbox-button_is-disabled":n};return c().createElement("label",{className:l()("slds-checkbox-button",k),htmlFor:m},c().createElement("input",{className:"slds-assistive-text",type:"checkbox",id:m,value:m,disabled:n,defaultChecked:o,tabIndex:i,onChange:h,onFocus:f,onBlur:p}),c().createElement(d.eX,{symbol:s,size:a,useCurrentColor:b,assistiveText:r}))};y.defaultProps={iconAssistiveText:"Add product",iconSize:"x-small",iconSymbol:"add",iconCurrentColor:!0},y.propTypes={isDisabled:a().bool,isChecked:a().bool,tabIndex:a().number,iconAssistiveText:a().string,iconSize:a().string,iconSymbol:a().string,iconCurrentColor:a().bool};var x=function(e){function t(e){var n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(n=function(e,t,n){return t=k(t),function(e,t){if(t&&("object"==b(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,m()?Reflect.construct(t,n\|\|[],k(e).constructor):t.apply(e,n))}(this,t,[e])).state={checked:!!n.props.isChecked,focused:!1},n.handleCheckboxChange=n.handleCheckboxChange.bind(n),n.handleFocus=n.handleFocus.bind(n),n.handleBlur=n.handleBlur.bind(n),n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&p(e,t)}(t,e),n=t,(o=[{key:"handleCheckboxChange",value:function(){this.setState({checked:!this.state.checked})}},{key:"handleFocus",value:function(){this.state.focused\|\|this.setState({focused:!0})}},{key:"handleBlur",value:function(){this.state.focused&&this.setState({focused:!1})}},{key:"render",value:function(){var e=this.props,t=e.iconChecked,n=e.iconUnchecked,o=e.isDisabled,i=e.tabIndex;return c().createElement(y,{onChange:this.handleCheckboxChange,iconSymbol:this.state.checked?t:n,isChecked:this.state.checked,isDisabled:o,isFocused:this.state.focused,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:i})}}])&&h(n.prototype,o),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,o}(o.Component);x.defaultProps={iconChecked:"check",iconUnchecked:"add"},x.propTypes={iconChecked:a().string,iconUnchecked:a().string};var v=function(e){var t=e.disabled,n=e.checked,o=e.tabIndex,i=e.label,r=u.Ay.uniqueId("add-checkbox-");return c().createElement("div",{className:"slds-checkbox_add-button"},c().createElement("input",{className:"slds-assistive-text",type:"checkbox",id:r,value:r,disabled:t,defaultChecked:n,tabIndex:o}),c().createElement("label",{htmlFor:r,className:"slds-checkbox_faux"},c().createElement("span",{className:"slds-assistive-text"},i\|\|"Add product")))},g=c().createElement(x,null),C=[{id:"checkbox-button-checked",label:"Checked",element:c().createElement(x,{isChecked:!0})},{id:"checkbox-button-disabled",label:"Disabled",element:c().createElement(x,{isDisabled:!0})},{id:"checkbox-button-checked-disabled",label:"Checked and Disabled",element:c().createElement(x,{isChecked:!0,isDisabled:!0})},{id:"checkbox-add-button-checked",label:"Deprecated - Checked",element:c().createElement(v,{checked:!0})},{id:"checkbox-add-button-disabled",label:"Deprecated - Disabled",element:c().createElement(v,{disabled:!0})},{id:"checkbox-add-button-checked-and-disabled",label:"Deprecated - Checked and Disabled",element:c().createElement(v,{checked:!0,disabled:!0})}],_=[{id:"checkbox-button-icon-symbol",label:"Different Icon",element:c().createElement(x,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full"})},{id:"checkbox-button-checked-icon-symbol",label:"Different Icon - Checked",element:c().createElement(x,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full",isChecked:!0})},{id:"checkbox-button-disabled-icon-symbol",label:"Different Icon - Disabled",element:c().createElement(x,{iconUnchecked:"recycle_bin_empty",isDisabled:!0})},{id:"checkbox-button-checked-disabled-icon-symbol",label:"Different Icon - Checked and Disabled",element:c().createElement(x,{iconChecked:"recycle_bin_full",isChecked:!0,isDisabled:!0})}],O=n(6547),S=n(9285),E=i.XB.a,w=i.XB.code,D=i.XB.h2,j=i.XB.h3,B=i.XB.li,T=i.XB.p,A=i.XB.table,I=i.XB.tbody,P=i.XB.td,N=i.XB.th,X=i.XB.thead,F=i.XB.tr,M=i.XB.ul,U=function(){return(0,o.createElement)(i.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"A styled checkable input that communicates if an option is being added to a group"),(0,o.createElement)(O.A,{exampleOnly:!0},(0,u.NO)(g)),D({id:"About-Checkbox-Button"},"About Checkbox Button"),T({},"The checkbox button is similar to a checkbox in that it presents a user with a\nbinary choice for an item. However, the only action a user can take is to\nadd (or remove) an entity. When a user clicks the checkbox button, the entity is\nstored, similar to an ‘add to cart’ experience, until the user saves changes."),T({},"The checkbox button is useful for increasing clarity. Since the button only adds\nor removes entities, the user knows the action they will prompt upon click.\nThe checkbox button also provides a clear visual affordance and a large target to take this action."),T({},"Use the add button if the component you’re building:"),M({},B({},"Exists without other multi-select elements (i.e. checkboxes)"),B({},"Allows users to select multiple entities"),B({},"Semantically fits the add/remove model")),D({id:"Structure-and-Implementation"},"Structure and Implementation"),T({},"The checkbox ",w({},"<input>")," is visually hidden with ",w({},".slds-assistive-text")," and a faux checkbox is created using the ",E({href:"/components/icons"},"icon blueprint")," which allows the display of an icon instead of the standard checkbox."),T({},"Click and tap events are captured by a ",w({},"<label>")," that encases the entire blueprint. The ",w({},"for")," attribute of your ",w({},"<label>")," must match the ",w({},"id")," attribute of your ",w({},"<input>"),"."),T({},"The states of the checkbox button are styled with the following classes:"),A({},X({},F({},N({},"Class"),N({},"State"),N({},"Description"))),I({},F({},P({},w({},".slds-checkbox-button_is-checked")),P({},"checked"),P({},"The checked state when the checkbox button has been selected")),F({},P({},w({},".slds-checkbox-button_is-disabled")),P({},"disabled"),P({},"The disabled state when the checkbox button has been disabled")),F({},P({},w({},".slds-checkbox-button_is-focused")),P({},"focused"),P({},"The focused state when the checkbox button has focus; important for accessibility")))),T({},"When implementing this blueprint, monitor the state of the checkbox ",w({},"<input>")," and apply the appropriate state class listed in the above chart based on the current state of the checkbox ",w({},"<input>"),"."),T({},"It is possible to change the icon used within the checkbox button, see ",E({href:"#different-icon"},"Different Icons")," for more details."),j({id:"Mobile"},"Mobile"),(0,o.createElement)(S.s9,{patternSpecificText:"checkbox buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,o.createElement)(O.A,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox buttons"},(0,u.NO)(g)),D({id:"Base"},"Base"),(0,o.createElement)(O.A,null,(0,u.NO)(g)),D({id:"States"},"States"),j({id:"Checked"},"Checked"),(0,o.createElement)(O.A,null,(0,u.NO)(C,"checkbox-button-checked")),j({id:"Disabled"},"Disabled"),(0,o.createElement)(O.A,null,(0,u.NO)(C,"checkbox-button-disabled")),j({id:"Checked-and-Disabled"},"Checked and Disabled"),(0,o.createElement)(O.A,null,(0,u.NO)(C,"checkbox-button-checked-disabled")),D({id:"Examples"},"Examples"),j({id:"Different-Icon"},"Different Icon"),T({},"You may change the utility icon used by the checkbox button depending on the action you are communicating. Reference the ",E({href:"/icons/#utility"},"utility icon listing")," for all available options."),T({},"This example is using the ",w({},"recycle_bin_empty")," utility icon as its base state and the ",w({},"recycle_bin_full")," utility icon as its checked state."),(0,o.createElement)(O.A,null,(0,u.NO)(_,"checkbox-button-icon-symbol")),(0,o.createElement)(O.A,null,(0,u.NO)(_,"checkbox-button-checked-icon-symbol")))},L=function(){return(0,i.Qr)(U())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},c={};function i(e){var t=c[e];if(void 0!==t)return t.exports;var n=c[e]={id:e,exports:{}};return o[e](n,n.exports,i),n.exports}i.m=o,i.amdO={},e=[],i.O=function(t,n,o){if(!n){for(var c=0;c<e.length;c++){n=e[c][0],o=e[c][1];for(var r=!0,a=0;a<n.length;a++)i.O.j(n[a])?n.splice(a--,1):r=!1;if(r){e.splice(c--,1);var s=o();void 0!==s&&(t=s)}}return t}e.push([n,o])},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},i.cw=function(e){var t;return function(){if(e){var n=e;e=0,t={exports:{}},n.call(t.exports,t,t.exports)}return t.exports}},n=Object.getPrototypeOf,i.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var c=Object.create(null);i.r(c);var r={};t=t\|\|[null,n({}),n([]),n(n)];for(var a=2&o&&e;("object"==typeof a\|\|"function"==typeof a)&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},i.d(c,r),c},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=785,function(){var e={785:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var o,c,r=n[0],a=n[1],s=n[2],l=0;if(r.some(function(t){return 0!==e[t]})){for(o in a)i.o(a,o)&&(i.m[o]=a[o]);if(s)var u=s(i)}for(t&&t(n);l<r.length;l++)c=r[l],i.o(e,c)&&e[c]&&e[c][0](),e[c]=0;return i.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),i.nc=void 0;var r=i.O(void 0,[3540],function(){return i(598)});r=i.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/checkbox-button/docs.mdx.js"]=r}();

package/__internal/chunked/docs/ui/components/checkbox-button-group/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,r,n={3459:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return g},getElement:function(){return x}});var n=r(1594),o=r.n(n),a=r(5671),l=r(6547),c=(r(5619),r(6482)),i=r(9285),d=r(1369),s=r.n(d),u=(r(8347),function(e){return o().createElement("fieldset",{className:s()("slds-form-element",e.className)},o().createElement("legend",{className:"slds-form-element__legend slds-form-element__label"},"Scheduled Day(s)"),o().createElement("div",{className:"slds-form-element__control"},e.children))}),f=function(e){return o().createElement("div",{className:s()("slds-checkbox_button-group",e.className)},e.children)},m=function(e){var t=c.Ay.uniqueId("unique-id-".concat(e.id,"-"));return o().createElement("span",{className:s()("slds-button slds-checkbox_button",e.className)},o().createElement("input",{"aria-describedby":e.errorId,disabled:e.disabled,defaultChecked:e.checked,id:t,value:t,name:"checkbox",type:"checkbox"}),o().createElement("label",{className:"slds-checkbox_button__label",htmlFor:t},o().createElement("span",{className:"slds-checkbox_faux"},e.children)))},b=[{id:"default",label:"Default",element:o().createElement(u,null,o().createElement(f,null,o().createElement(m,{id:"monday"},"Mon"),o().createElement(m,{id:"tuesday"},"Tue"),o().createElement(m,{id:"wednesday"},"Wed"),o().createElement(m,{id:"thursday"},"Thu"),o().createElement(m,{id:"friday"},"Fri")))}],h=[{id:"has-error",label:"Error",element:o().createElement(u,{className:"slds-has-error"},o().createElement(f,null,o().createElement(m,{errorId:"error_01",id:"monday"},"Mon"),o().createElement(m,{errorId:"error_01",id:"tuesday"},"Tue"),o().createElement(m,{errorId:"error_01",id:"wednesday"},"Wed"),o().createElement(m,{errorId:"error_01",id:"thursday"},"Thu"),o().createElement(m,{errorId:"error_01",id:"friday"},"Fri")),o().createElement("div",{id:"error_01",className:"slds-form-element__help"},"This field is required"))},{id:"disabled",label:"Disabled",element:o().createElement(u,null,o().createElement(f,null,o().createElement(m,{id:"monday",disabled:!0},"Mon"),o().createElement(m,{id:"tuesday",disabled:!0},"Tue"),o().createElement(m,{id:"wednesday",disabled:!0},"Wed"),o().createElement(m,{id:"thursday",disabled:!0},"Thu"),o().createElement(m,{id:"friday",disabled:!0},"Fri")))}],p=a.XB.a,y=a.XB.code,E=a.XB.h2,_=a.XB.h3,v=a.XB.p,x=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"A styled checkable input group that communicates if an option(s) are true, false or indeterminate"),(0,n.createElement)(l.A,{exampleOnly:!0},(0,c.NO)(b)),E({id:"About-Checkbox-Button-Group"},"About Checkbox Button Group"),v({},"The checkbox-button-group is a set of ",p({href:"/components/checkbox-button"},"checkbox buttons")," wrapped in a fieldset that is also a ",p({href:"/components/form-element"},"form element"),". It is described by a legend with the classes ",y({},"slds-form-element__legend")," and ",y({},"slds-form-element__label")," applied to it."),_({id:"Mobile"},"Mobile"),(0,n.createElement)(i.s9,{patternSpecificText:"buttons in the checkbox button group will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as become stacked"}),(0,n.createElement)(l.A,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox button groups"},(0,c.NO)(b)),E({id:"Base"},"Base"),(0,n.createElement)(l.A,null,(0,c.NO)(b)),E({id:"States"},"States"),_({id:"Has-Error"},"Has Error"),(0,n.createElement)(l.A,null,(0,c.NO)(h,"has-error")),_({id:"Disabled"},"Disabled"),(0,n.createElement)(l.A,null,(0,c.NO)(h,"disabled")))},g=function(){return(0,a.Qr)(x())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,exports:{}};return n[e](r,r.exports,a),r.exports}a.m=n,a.amdO={},e=[],a.O=function(t,r,n,o){if(!r){var l=1/0;~~for(s=0;s~~<e.length;s++){r=e[s][0],n=e[s][1]~~,o=e[s][2]~~;for(var c=!0,i=0;i<r.length;i++)~~1&o&&!(l>=o)\|\|!Object.keys(~~a.O).~~every~~(~~function(e){return a.O[e](~~r[i])})?~~(c=!1,o<l&&(l=o)):~~r.splice(i--,1);if(c){e.splice(s--,1);var d=n();void 0!==d&&(t=d)}}return t}~~o=o\|\|0;for(var s=~~e.~~length;s>0&&e~~[~~s-1][2]>o;s--)e[s]=e[s-1];e[s]=[~~r,n,o]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},a.cw=function(e){var t;return function(){if(e){var r=e;e=0,t={exports:{}},r.call(t.exports,t,t.exports)}return t.exports}},r=Object.getPrototypeOf,a.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var l={};t=t\|\|[null,r({}),r([]),r(r)];for(var c=2&n&&e;("object"==typeof c\|\|"function"==typeof c)&&!~t.indexOf(c);c=r(c))Object.getOwnPropertyNames(c).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},a.d(o,l),o},a.d=function(e,t){for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=4359,function(){var e={4359:0};a.O.j=function(t){return 0===e[t]};var t=function(t,r){var n,o,l=r[0],c=r[1],i=r[2],d=0;if(l.some(function(t){return 0!==e[t]})){for(n in c)a.o(c,n)&&(a.m[n]=c[n]);if(i)var s=i(a)}for(t&&t(r);d<l.length;d++)o=l[d],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(s)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),a.nc=void 0;var l=a.O(void 0,[3540],function(){return a(3459)});l=a.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/checkbox-button-group/docs.mdx.js"]=l}();
1	+ var SLDS;!function(){"use strict";var e,t,r,n={3459:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return g},getElement:function(){return x}});var n=r(1594),o=r.n(n),a=r(5671),l=r(6547),c=(r(5619),r(6482)),i=r(9285),d=r(1369),s=r.n(d),u=(r(8347),function(e){return o().createElement("fieldset",{className:s()("slds-form-element",e.className)},o().createElement("legend",{className:"slds-form-element__legend slds-form-element__label"},"Scheduled Day(s)"),o().createElement("div",{className:"slds-form-element__control"},e.children))}),m=function(e){return o().createElement("div",{className:s()("slds-checkbox_button-group",e.className)},e.children)},f=function(e){var t=c.Ay.uniqueId("unique-id-".concat(e.id,"-"));return o().createElement("span",{className:s()("slds-button slds-checkbox_button",e.className)},o().createElement("input",{"aria-describedby":e.errorId,disabled:e.disabled,defaultChecked:e.checked,id:t,value:t,name:"checkbox",type:"checkbox"}),o().createElement("label",{className:"slds-checkbox_button__label",htmlFor:t},o().createElement("span",{className:"slds-checkbox_faux"},e.children)))},b=[{id:"default",label:"Default",element:o().createElement(u,null,o().createElement(m,null,o().createElement(f,{id:"monday"},"Mon"),o().createElement(f,{id:"tuesday"},"Tue"),o().createElement(f,{id:"wednesday"},"Wed"),o().createElement(f,{id:"thursday"},"Thu"),o().createElement(f,{id:"friday"},"Fri")))}],h=[{id:"has-error",label:"Error",element:o().createElement(u,{className:"slds-has-error"},o().createElement(m,null,o().createElement(f,{errorId:"error_01",id:"monday"},"Mon"),o().createElement(f,{errorId:"error_01",id:"tuesday"},"Tue"),o().createElement(f,{errorId:"error_01",id:"wednesday"},"Wed"),o().createElement(f,{errorId:"error_01",id:"thursday"},"Thu"),o().createElement(f,{errorId:"error_01",id:"friday"},"Fri")),o().createElement("div",{id:"error_01",className:"slds-form-element__help"},"This field is required"))},{id:"disabled",label:"Disabled",element:o().createElement(u,null,o().createElement(m,null,o().createElement(f,{id:"monday",disabled:!0},"Mon"),o().createElement(f,{id:"tuesday",disabled:!0},"Tue"),o().createElement(f,{id:"wednesday",disabled:!0},"Wed"),o().createElement(f,{id:"thursday",disabled:!0},"Thu"),o().createElement(f,{id:"friday",disabled:!0},"Fri")))}],p=a.XB.a,E=a.XB.code,y=a.XB.h2,_=a.XB.h3,v=a.XB.p,x=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"A styled checkable input group that communicates if an option(s) are true, false or indeterminate"),(0,n.createElement)(l.A,{exampleOnly:!0},(0,c.NO)(b)),y({id:"About-Checkbox-Button-Group"},"About Checkbox Button Group"),v({},"The checkbox-button-group is a set of ",p({href:"/components/checkbox-button"},"checkbox buttons")," wrapped in a fieldset that is also a ",p({href:"/components/form-element"},"form element"),". It is described by a legend with the classes ",E({},"slds-form-element__legend")," and ",E({},"slds-form-element__label")," applied to it."),_({id:"Mobile"},"Mobile"),(0,n.createElement)(i.s9,{patternSpecificText:"buttons in the checkbox button group will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as become stacked"}),(0,n.createElement)(l.A,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox button groups"},(0,c.NO)(b)),y({id:"Base"},"Base"),(0,n.createElement)(l.A,null,(0,c.NO)(b)),y({id:"States"},"States"),_({id:"Has-Error"},"Has Error"),(0,n.createElement)(l.A,null,(0,c.NO)(h,"has-error")),_({id:"Disabled"},"Disabled"),(0,n.createElement)(l.A,null,(0,c.NO)(h,"disabled")))},g=function(){return(0,a.Qr)(x())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,exports:{}};return n[e](r,r.exports,a),r.exports}a.m=n,a.amdO={},e=[],a.O=function(t,r,n){if(!r){for(var o=0;o<e.length;o++){r=e[o][0],n=e[o][1];for(var l=!0,c=0;c<r.length;c++)a.O.j(r[c])?r.splice(c--,1):l=!1;if(l){e.splice(o--,1);var i=n();void 0!==i&&(t=i)}}return t}e.push([r,n])},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},a.cw=function(e){var t;return function(){if(e){var r=e;e=0,t={exports:{}},r.call(t.exports,t,t.exports)}return t.exports}},r=Object.getPrototypeOf,a.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var l={};t=t\|\|[null,r({}),r([]),r(r)];for(var c=2&n&&e;("object"==typeof c\|\|"function"==typeof c)&&!~t.indexOf(c);c=r(c))Object.getOwnPropertyNames(c).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},a.d(o,l),o},a.d=function(e,t){for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=4359,function(){var e={4359:0};a.O.j=function(t){return 0===e[t]};var t=function(t,r){var n,o,l=r[0],c=r[1],i=r[2],d=0;if(l.some(function(t){return 0!==e[t]})){for(n in c)a.o(c,n)&&(a.m[n]=c[n]);if(i)var s=i(a)}for(t&&t(r);d<l.length;d++)o=l[d],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(s)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),a.nc=void 0;var l=a.O(void 0,[3540],function(){return a(3459)});l=a.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/checkbox-button-group/docs.mdx.js"]=l}();

package/__internal/chunked/docs/ui/components/checkbox-toggle/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,n,l={8285:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return I},getElement:function(){return A}});var l=n(1594),c=n.n(l),r=n(5671),o=n(6547),a=(n(7675),n(5619),n(6390)),i=n(6482),s=n(9285),u=n(1369),d=n.n(u),h=function(e){return c().createElement("div",{className:d()("slds-form-element",e.className)},e.children)},b=function(e){return c().createElement("label",{className:d()("slds-checkbox_toggle slds-grid",e.className),htmlFor:e.id},e.children)},m=function(e){return c().createElement("span",{className:d()("slds-form-element__label","slds-m-bottom_none",{"slds-assistive-text":e.isBare})},e.children)},f=function(e){return c().createElement("input",{name:e.uniqueId,value:e.uniqueId,type:"checkbox",role:"switch",disabled:e.disabled,defaultChecked:e.checked,"aria-describedby":e.uniqueId})},g=function(e){return c().createElement("span",{id:e.uniqueId,className:d()("slds-checkbox_faux_container",e.className)},c().createElement("span",{className:"slds-checkbox_faux"}),c().createElement("span",{className:d()("slds-checkbox_on",e.className),"aria-hidden":"true"},e.labelTextOn\|\|"Enabled"),c().createElement("span",{className:d()("slds-checkbox_off",e.className),"aria-hidden":"true"},e.labelTextOff\|\|"Disabled"))},p=function(e){var t=i.Ay.uniqueId("checkbox-toggle-");return c().createElement(h,null,c().createElement(b,null,c().createElement(m,{isBare:e.isBare},e.title\|\|"Toggle Label"),c().createElement(f,{uniqueId:t,checked:e.checked,disabled:e.disabled}),c().createElement(g,{uniqueId:t,labelTextOn:e.labelTextOn,labelTextOff:e.labelTextOff})))},k=function(e){var t=i.Ay.uniqueId("checkbox-toggle-");return c().createElement(h,null,c().createElement(b,null,c().createElement(m,null,"Toggle Label"),c().createElement(f,{uniqueId:t,checked:!0}),c().createElement(g,{uniqueId:t})))},x=function(e){var t=i.Ay.uniqueId("checkbox-toggle-");return c().createElement(h,null,c().createElement(b,null,c().createElement(m,null,"Toggle Label"),c().createElement(f,{uniqueId:t,disabled:!0}),c().createElement(g,{uniqueId:t})))},v=function(e){var t=i.Ay.uniqueId("checkbox-toggle-");return c().createElement(h,null,c().createElement(b,null,c().createElement(m,null,"Toggle Label"),c().createElement(f,{uniqueId:t,disabled:!0,checked:!0}),c().createElement(g,{uniqueId:t})))},y=function(e){var t=i.Ay.uniqueId("checkbox-toggle-");return c().createElement("div",{dir:"rtl"},c().createElement(h,null,c().createElement(b,null,c().createElement(m,null,"Toggle Label"),c().createElement(f,{uniqueId:t,checked:!0}),c().createElement(g,{uniqueId:t}))))},E=c().createElement(p,null),O=[{id:"checkbox-toggle-checked",label:"Checked",element:c().createElement(k,null)},{id:"checkbox-toggle-disabled",label:"Disabled",element:c().createElement(x,null)},{id:"checkbox-toggle-checked-disabled",label:"Checked and Disabled",element:c().createElement(v,null)},{id:"checkbox-toggle-rtl",label:"Right to Left",element:c().createElement(y,null)}],S=r.XB.code,q=r.XB.h2,w=r.XB.h3,_=r.XB.h4,T=r.XB.p,A=function(){return(0,l.createElement)(r.Ay,{},(0,l.createElement)("div",{className:"lead doc"},"A checkable input that communicates if an option is true, false or indeterminate"),(0,l.createElement)(o.A,{exampleOnly:!0},(0,i.NO)(O,"checkbox-toggle-checked")),q({id:"About-Checkbox-Toggle"},"About Checkbox Toggle"),T({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),w({id:"Accessibility"},"Accessibility"),T({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),T({},"Custom checkboxes are created by applying the ",S({},".slds-checkbox")," class to a ",S({},"<label>")," element. To remain accessible to all user agents, place ",S({},"<input>")," with ",S({},'type="checkbox"')," inside the ",S({},"<label>")," element. The ",S({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",S({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",S({},".slds-form-element__label")," contains the label text."),T({},"When a single checkbox is required, ",S({},'<div class="slds-checkbox">')," should get ",S({},'<abbr class="required" title="required"></abbr>')," added to the DOM, directly before the ",S({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),T({},"When a checkbox group is required, the ",S({},"<fieldset>")," should receive the class ",S({},".slds-is-required"),". The ",S({},"<legend>")," should then get ",S({},'<abbr class="required" title="required"></abbr>')," added to the DOM for visual indication that the checkbox group is required."),T({},"As SLDS checkboxes rely on the ",S({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),T({},"The following JavaScript demonstrates how to set a checkbox to be indeterminate:"),S({},"var checkbox = document.getElementById('checkbox-indeterminate-01');\ncheckbox.indeterminate = true;\n"),w({id:"Mobile"},"Mobile"),(0,l.createElement)(s.s9,{patternSpecificText:"checkbox toggles will have an increased label text size"}),(0,l.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox toggle"},(0,i.NO)(E)),q({id:"Base"},"Base"),(0,l.createElement)(o.A,null,(0,i.NO)(E)),w({id:"States"},"States"),_({id:"Checked"},"Checked"),(0,l.createElement)(o.A,null,(0,i.NO)(O,"checkbox-toggle-checked")),_({id:"Disabled"},"Disabled"),(0,l.createElement)(o.A,null,(0,i.NO)(O,"checkbox-toggle-disabled")),_({id:"Right-to-Left"},"Right to Left"),(0,l.createElement)(o.A,null,(0,i.NO)(O,"checkbox-toggle-rtl")),q({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,l.createElement)(a.A,{name:"checkbox-toggle",type:"component"}))},I=function(){return(0,r.Qr)(A())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},c={};function r(e){var t=c[e];if(void 0!==t)return t.exports;var n=c[e]={id:e,exports:{}};return l[e](n,n.exports,r),n.exports}r.m=l,r.amdO={},e=[],r.O=function(t,n,l,c){if(!n){var o=1/0;~~for(u=0;u~~<e.length;u++){n=e[u][0],l=e[u][1]~~,c=e[u][2]~~;for(var a=!0,i=0;i<n.length;i++)~~1&c&&!(o>=c)\|\|!Object.keys(~~r.O).~~every~~(~~function(e){return r.O[e](~~n[i])})?~~(a=!1,c<o&&(o=c)):~~n.splice(i--,1);if(a){e.splice(u--,1);var s=l();void 0!==s&&(t=s)}}return t}~~c=c\|\|0;for(var u=~~e.~~length;u>0&&e~~[~~u-1][2]>c;u--)e[u]=e[u-1];e[u]=[~~n,l,c]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.cw=function(e){var t;return function(){if(e){var n=e;e=0,t={exports:{}},n.call(t.exports,t,t.exports)}return t.exports}},n=Object.getPrototypeOf,r.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var c=Object.create(null);r.r(c);var o={};t=t\|\|[null,n({}),n([]),n(n)];for(var a=2&l&&e;("object"==typeof a\|\|"function"==typeof a)&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},r.d(c,o),c},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=1213,function(){var e={1213:0};r.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,c,o=n[0],a=n[1],i=n[2],s=0;if(o.some(function(t){return 0!==e[t]})){for(l in a)r.o(a,l)&&(r.m[l]=a[l]);if(i)var u=i(r)}for(t&&t(n);s<o.length;s++)c=o[s],r.o(e,c)&&e[c]&&e[c][0](),e[c]=0;return r.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),r.nc=void 0;var o=r.O(void 0,[3540],function(){return r(8285)});o=r.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/checkbox-toggle/docs.mdx.js"]=o}();
1	+ var SLDS;!function(){"use strict";var e,t,n,l={8285:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return I},getElement:function(){return A}});var l=n(1594),c=n.n(l),r=n(5671),a=n(6547),o=(n(7675),n(5619),n(6390)),i=n(6482),s=n(9285),u=n(1369),d=n.n(u),h=function(e){return c().createElement("div",{className:d()("slds-form-element",e.className)},e.children)},b=function(e){return c().createElement("label",{className:d()("slds-checkbox_toggle slds-grid",e.className),htmlFor:e.id},e.children)},m=function(e){return c().createElement("span",{className:d()("slds-form-element__label","slds-m-bottom_none",{"slds-assistive-text":e.isBare})},e.children)},f=function(e){return c().createElement("input",{name:e.uniqueId,value:e.uniqueId,type:"checkbox",role:"switch",disabled:e.disabled,defaultChecked:e.checked,"aria-describedby":e.uniqueId})},g=function(e){return c().createElement("span",{id:e.uniqueId,className:d()("slds-checkbox_faux_container",e.className)},c().createElement("span",{className:"slds-checkbox_faux"}),c().createElement("span",{className:d()("slds-checkbox_on",e.className),"aria-hidden":"true"},e.labelTextOn\|\|"Enabled"),c().createElement("span",{className:d()("slds-checkbox_off",e.className),"aria-hidden":"true"},e.labelTextOff\|\|"Disabled"))},p=function(e){var t=i.Ay.uniqueId("checkbox-toggle-");return c().createElement(h,null,c().createElement(b,null,c().createElement(m,{isBare:e.isBare},e.title\|\|"Toggle Label"),c().createElement(f,{uniqueId:t,checked:e.checked,disabled:e.disabled}),c().createElement(g,{uniqueId:t,labelTextOn:e.labelTextOn,labelTextOff:e.labelTextOff})))},x=function(e){var t=i.Ay.uniqueId("checkbox-toggle-");return c().createElement(h,null,c().createElement(b,null,c().createElement(m,null,"Toggle Label"),c().createElement(f,{uniqueId:t,checked:!0}),c().createElement(g,{uniqueId:t})))},k=function(e){var t=i.Ay.uniqueId("checkbox-toggle-");return c().createElement(h,null,c().createElement(b,null,c().createElement(m,null,"Toggle Label"),c().createElement(f,{uniqueId:t,disabled:!0}),c().createElement(g,{uniqueId:t})))},v=function(e){var t=i.Ay.uniqueId("checkbox-toggle-");return c().createElement(h,null,c().createElement(b,null,c().createElement(m,null,"Toggle Label"),c().createElement(f,{uniqueId:t,disabled:!0,checked:!0}),c().createElement(g,{uniqueId:t})))},y=function(e){var t=i.Ay.uniqueId("checkbox-toggle-");return c().createElement("div",{dir:"rtl"},c().createElement(h,null,c().createElement(b,null,c().createElement(m,null,"Toggle Label"),c().createElement(f,{uniqueId:t,checked:!0}),c().createElement(g,{uniqueId:t}))))},E=c().createElement(p,null),O=[{id:"checkbox-toggle-checked",label:"Checked",element:c().createElement(x,null)},{id:"checkbox-toggle-disabled",label:"Disabled",element:c().createElement(k,null)},{id:"checkbox-toggle-checked-disabled",label:"Checked and Disabled",element:c().createElement(v,null)},{id:"checkbox-toggle-rtl",label:"Right to Left",element:c().createElement(y,null)}],S=r.XB.code,q=r.XB.h2,w=r.XB.h3,_=r.XB.h4,T=r.XB.p,A=function(){return(0,l.createElement)(r.Ay,{},(0,l.createElement)("div",{className:"lead doc"},"A checkable input that communicates if an option is true, false or indeterminate"),(0,l.createElement)(a.A,{exampleOnly:!0},(0,i.NO)(O,"checkbox-toggle-checked")),q({id:"About-Checkbox-Toggle"},"About Checkbox Toggle"),T({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),w({id:"Accessibility"},"Accessibility"),T({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),T({},"Custom checkboxes are created by applying the ",S({},".slds-checkbox")," class to a ",S({},"<label>")," element. To remain accessible to all user agents, place ",S({},"<input>")," with ",S({},'type="checkbox"')," inside the ",S({},"<label>")," element. The ",S({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",S({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",S({},".slds-form-element__label")," contains the label text."),T({},"When a single checkbox is required, ",S({},'<div class="slds-checkbox">')," should get ",S({},'<abbr class="required" title="required"></abbr>')," added to the DOM, directly before the ",S({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),T({},"When a checkbox group is required, the ",S({},"<fieldset>")," should receive the class ",S({},".slds-is-required"),". The ",S({},"<legend>")," should then get ",S({},'<abbr class="required" title="required"></abbr>')," added to the DOM for visual indication that the checkbox group is required."),T({},"As SLDS checkboxes rely on the ",S({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),T({},"The following JavaScript demonstrates how to set a checkbox to be indeterminate:"),S({},"var checkbox = document.getElementById('checkbox-indeterminate-01');\ncheckbox.indeterminate = true;\n"),w({id:"Mobile"},"Mobile"),(0,l.createElement)(s.s9,{patternSpecificText:"checkbox toggles will have an increased label text size"}),(0,l.createElement)(a.A,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox toggle"},(0,i.NO)(E)),q({id:"Base"},"Base"),(0,l.createElement)(a.A,null,(0,i.NO)(E)),w({id:"States"},"States"),_({id:"Checked"},"Checked"),(0,l.createElement)(a.A,null,(0,i.NO)(O,"checkbox-toggle-checked")),_({id:"Disabled"},"Disabled"),(0,l.createElement)(a.A,null,(0,i.NO)(O,"checkbox-toggle-disabled")),_({id:"Right-to-Left"},"Right to Left"),(0,l.createElement)(a.A,null,(0,i.NO)(O,"checkbox-toggle-rtl")),q({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,l.createElement)(o.A,{name:"checkbox-toggle",type:"component"}))},I=function(){return(0,r.Qr)(A())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},c={};function r(e){var t=c[e];if(void 0!==t)return t.exports;var n=c[e]={id:e,exports:{}};return l[e](n,n.exports,r),n.exports}r.m=l,r.amdO={},e=[],r.O=function(t,n,l){if(!n){for(var c=0;c<e.length;c++){n=e[c][0],l=e[c][1];for(var a=!0,o=0;o<n.length;o++)r.O.j(n[o])?n.splice(o--,1):a=!1;if(a){e.splice(c--,1);var i=l();void 0!==i&&(t=i)}}return t}e.push([n,l])},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.cw=function(e){var t;return function(){if(e){var n=e;e=0,t={exports:{}},n.call(t.exports,t,t.exports)}return t.exports}},n=Object.getPrototypeOf,r.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var c=Object.create(null);r.r(c);var a={};t=t\|\|[null,n({}),n([]),n(n)];for(var o=2&l&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},r.d(c,a),c},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=1213,function(){var e={1213:0};r.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,c,a=n[0],o=n[1],i=n[2],s=0;if(a.some(function(t){return 0!==e[t]})){for(l in o)r.o(o,l)&&(r.m[l]=o[l]);if(i)var u=i(r)}for(t&&t(n);s<a.length;s++)c=a[s],r.o(e,c)&&e[c]&&e[c][0](),e[c]=0;return r.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),r.nc=void 0;var a=r.O(void 0,[3540],function(){return r(8285)});a=r.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/checkbox-toggle/docs.mdx.js"]=a}();

package/__internal/chunked/docs/ui/components/color-picker/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,r,o={4226:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return Q},getElement:function(){return z}});var o=r(1594),n=r.n(o),s=r(5671),l=r(6547),i=(r(2436),r(9582),r(5619)),a=r(6482),c=r(1369),d=r.n(c),u=r(8347),m=r(9825),h=r(2537),p=r(5006),f=r(2711),b=r(5526);function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}function v(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,k(o.key),o)}}function k(e){var t=function(e){if("object"!=y(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=y(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==y(t)?t:t+""}function E(e,t){return E=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},E(e,t)}function w(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(w=function(){return!!e})()}function g(e){return g=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},g(e)}var _=["#e3abec","#c2dbf7","#9fd6ff","#9de7da","#9df0c0","#fff099","#fed49a","#d073e0","#86baf3","#5ebbff","#44d8be","#3be282","#ffe654","#ffb758","#bd35bd","#5779c1","#5ebbff","#00aea9","#3cba4c","#f5bc25","#f99221","#580d8c","#001970","#0a2399","#0b7477","#0b6b50","#b67e11","#b85d0d"],O="Please ensure value is correct",S=function(e){return n().createElement("span",{key:a.Ay.uniqueId("swatch-"),className:"slds-swatch",style:{background:e.color}},n().createElement("span",{className:"slds-assistive-text","aria-hidden":e.ariaHidden},e.color))},x=function(e){var t=e.hasSummaryError,r="color-picker-summary-error";return n().createElement(f.ZS,{formElementClassName:"slds-color-picker__summary",labelContent:"Choose Color",labelClassName:"slds-color-picker__summary-label",inputId:"color-picker-summary-input",hasError:t},n().createElement(m.$n,{className:"slds-color-picker__summary-button slds-button_icon slds-button_icon-more",title:"Choose Color"},n().createElement(S,{color:"hsl(220, 46%, 55%)",suppressAssistiveText:!0}),n().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-m-left_xx-small",sprite:"utility",symbol:"down"}),n().createElement("span",{className:"slds-assistive-text"},"Choose a color. Current color: #5679C0")),n().createElement("div",{className:"slds-color-picker__summary-input"},n().createElement(b.A,{id:"color-picker-summary-input",defaultValue:"#5679C0","aria-describedby":t?r:null})),t?n().createElement("p",{className:"slds-form-error",id:r},O):null)},C=function(e){var t=e.isMenuRole,r=t?"menu":"listbox",o=t?"menuitem":"option";return n().createElement("ul",{className:"slds-color-picker__swatches",role:r,"aria-label":"Preset colors"},_.map(function(e,t){return n().createElement("li",{key:a.Ay.uniqueId("color-picker-swatch-"),className:"slds-color-picker__swatch",role:"presentation"},n().createElement("a",{className:"slds-color-picker__swatch-trigger",href:"#",role:o,tabIndex:0===t?0:-1},n().createElement(S,{color:e,index:t})))}))},T=function(e){var t=a.Ay.uniqueId("color-picker-input-range-"),r=a.Ay.uniqueId("color-picker-input-hex-"),o=a.Ay.uniqueId("color-picker-input-r-"),s=a.Ay.uniqueId("color-picker-input-g-"),l=a.Ay.uniqueId("color-picker-input-b-"),i=e.hasCustomError,c="color-picker-custom-error";return n().createElement("div",{className:"slds-color-picker__custom"},n().createElement("p",{id:"color-picker-instructions",className:"slds-assistive-text"},"Use arrow keys to select a saturation and brightness, on an x and y axis."),n().createElement("div",{className:"slds-color-picker__custom-range",style:{background:"hsl(220, 100%, 50%)"}},n().createElement("button",{className:"slds-color-picker__range-indicator",style:{bottom:"45%",left:"46%"},"aria-live":"assertive","aria-atomic":"true","aria-describedby":"color-picker-instructions"},n().createElement("span",{className:"slds-assistive-text"},"hex #5679C0"))),n().createElement("div",{className:"slds-color-picker__hue-and-preview"},n().createElement("label",{className:"slds-assistive-text",htmlFor:t},"Select Hue"),n().createElement("input",{type:"range",className:"slds-color-picker__hue-slider",min:"0",max:"360",defaultValue:"208",id:t}),n().createElement(S,{color:"#5679C0",ariaHidden:!0})),n().createElement("div",{className:"slds-color-picker__custom-inputs"},n().createElement(f.ZS,{labelContent:"Hex",formElementClassName:"slds-color-picker__input-custom-hex",hasError:i,inputId:r},n().createElement(b.A,{id:r,defaultValue:"#5679C0","aria-describedby":i?c:null})),n().createElement(f.ZS,{labelContent:n().createElement("abbr",{title:"Red"},"R"),inputId:o},n().createElement(b.A,{defaultValue:"86",id:o})),n().createElement(f.ZS,{labelContent:n().createElement("abbr",{title:"Green"},"G"),inputId:s},n().createElement(b.A,{defaultValue:"121",id:s})),n().createElement(f.ZS,{labelContent:n().createElement("abbr",{title:"blue"},"B"),inputId:l},n().createElement(b.A,{defaultValue:"192",id:l}))),i?n().createElement("p",{className:"slds-form-error",id:c},O):null)},N=function(){return n().createElement("div",{className:"slds-color-picker__selector-footer"},n().createElement(m.$n,{isNeutral:!0},"Cancel"),n().createElement(m.$n,{isBrand:!0},"Done"))},I=function(e){return n().createElement(h.A,{selectedIndex:e.selectedTabIndex},n().createElement(h.A.Item,{title:"Default",id:"color-picker-default"},n().createElement(C,null)),n().createElement(h.A.Item,{title:"Custom",id:"color-picker-custom"},n().createElement(T,{hasCustomError:e.hasCustomError})))},A=function(e){function t(e){var r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(r=function(e,t,r){return t=g(t),function(e,t){if(t&&("object"==y(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,w()?Reflect.construct(t,r\|\|[],g(e).constructor):t.apply(e,r))}(this,t)).state={selectedTabIndex:e.selectedTabIndex\|\|0},r.isFullFeatureMode=r.isFullFeatureMode.bind(r),r.isPredefinedMode=r.isPredefinedMode.bind(r),r.isCustomOnlyMode=r.isCustomOnlyMode.bind(r),r.isSwatchesOnlyMode=r.isSwatchesOnlyMode.bind(r),r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&E(e,t)}(t,e),r=t,(o=[{key:"isFullFeatureMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(!t\|\|!r)}},{key:"isPredefinedMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(!t\|\|r)}},{key:"isCustomOnlyMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(t\|\|!r)}},{key:"isSwatchesOnlyMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(t\|\|r)}},{key:"render",value:function(){var e=this.state.selectedTabIndex,t=this.props,r=t.isOpen,o=t.hasSummaryError,s=t.hasCustomError,l=r?"slds-show":"slds-hide",i=this.isSwatchesOnlyMode()?null:n().createElement(x,{hasSummaryError:o}),a=this.isSwatchesOnlyMode()?null:n().createElement(N,null),c=null;return this.isFullFeatureMode()?c=n().createElement(I,{hasCustomError:s,selectedTabIndex:e}):this.isPredefinedMode()?c=n().createElement(C,null):this.isCustomOnlyMode()?c=n().createElement(T,{hasCustomError:s}):this.isSwatchesOnlyMode()&&(c=n().createElement(I,{selectedTabIndex:e})),n().createElement("div",{className:"slds-color-picker"},i,n().createElement(p.AM,{title:"Choose a color",className:d()("slds-color-picker__selector",l),footer:a},c))}}])&&v(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),r;var r,o}(n().Component);A.defaultProps={selectedTabIndex:0,isOpen:!1,hasPredefined:!0,hasCustom:!0};var P=A,j=n().createElement(P,null),M=[{id:"summary-error",label:"Summary Error",element:n().createElement(P,{hasSummaryError:!0})},{id:"color-picker-open",label:"Open, default tab selected",element:n().createElement(P,{isOpen:!0})},{id:"custom-tab-selected",label:"Open, custom tab selected",element:n().createElement(P,{isOpen:!0,selectedTabIndex:1})},{id:"custom-tab-selected-error",label:"Open, custom tab selected, error state",element:n().createElement(P,{isOpen:!0,hasCustomError:!0,selectedTabIndex:1})}],B=n().createElement(P,{hasPredefined:!1}),F=[{id:"custom-color-picker-open",label:"Open",element:n().createElement(P,{isOpen:!0,hasPredefined:!1})},{id:"custom-color-picker-open-error",label:"Open with Error",element:n().createElement(P,{isOpen:!0,hasCustomError:!0,hasPredefined:!1})}],H=n().createElement(P,{hasCustom:!1}),D=[{id:"predefined-color-picker-open",label:"Open",element:n().createElement(P,{isOpen:!0,hasCustom:!1})}],R=r(4760),X=[{id:"default",label:"Default",element:n().createElement(R.l9,null,n().createElement("div",{className:"slds-dropdown slds-dropdown_left"},n().createElement("div",{className:"slds-color-picker slds-color-picker_swatches-only"},n().createElement("div",{className:"slds-color-picker__selector"},n().createElement(C,{isMenuRole:!0})))))}],q=[{id:"open-swatches-only-color-picker",label:"Open",element:n().createElement("div",{style:{height:"12rem"}},n().createElement(R.l9,{isOpen:!0},n().createElement("div",{className:"slds-dropdown slds-dropdown_left"},n().createElement("div",{className:"slds-color-picker slds-color-picker_swatches-only"},n().createElement("div",{className:"slds-color-picker__selector"},n().createElement(C,{isMenuRole:!0}))))))}],L=s.XB.code,V=s.XB.em,G=s.XB.h2,U=s.XB.h3,Z=s.XB.h4,K=s.XB.li,J=s.XB.p,W=s.XB.strong,$=s.XB.ul,z=function(){return(0,o.createElement)(s.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"A configurable interface for color selection"),(0,o.createElement)(l.A,{exampleOnly:!0},(0,a.NO)(M,"color-picker-open")),G({id:"About-Color-Picker"},"About Color Picker"),J({},"The Unified Color Picker component allows for a fully accessible and configurable color picker, allowing the user to pick from a set of predefined colors (swatches), or to pick a custom color using a HSB selection interface."),J({},"It can be configured to show one or both of those color selection interfaces."),J({},"The Unified Color Picker component allows for a fully accessible and configurable\ncolor picker, allowing the user to pick from a set of predefined colors\n(swatches), or to pick a custom color using a HSB selection interface."),J({},"It can be configured to show one or both of those color selection interfaces."),U({id:"Accessibility"},"Accessibility"),J({},"This component makes use of other components, such as Popovers, Tabs, and Input.\nAll accessibility rules and guidelines for those components ",V({},"need")," to be followed\nfor proper accessibility support."),J({},"As this is a highly interactive component, there are some key accessibility\nguidelines that must be followed for specific elements:"),J({},W({},".slds-color-picker__summary-label")),J({},"This element ",V({},"needs")," a for attribute with the value of the\n",L({},".slds-color-picker__summary-input"),"'s ID"),J({},W({},".slds-color-picker__swatches")),J({},"This element ",V({},"needs")," a ",L({},"role")," of ",L({},"listbox"),"."),J({},W({},".slds-color-picker__swatch")),J({},"This element ",V({},"needs")," a ",L({},"role")," of ",L({},"presentation"),"."),J({},W({},".slds-color-picker__swatch-trigger")),J({},"This element ",V({},"needs")," a ",L({},"role")," of ",L({},"option"),"."),J({},W({},".slds-color-picker__range-indicator")),J({},"Since this element is focused and moved to indicate the ",V({},"working color")," it ",V({},"needs"),"\nproper aria tags to indicate its job and value. First, an ",L({},"aria-live")," attribute\n",V({},"needs")," to be set to ",L({},"assertive"),", ",L({},"aria-atomic")," ",V({},"needs")," to be set to ",L({},"true"),", and\n",L({},"aria-describedby")," needs to reference the instructions text for the custom color\npicker range, which in our example is the hidden ",L({},"#color-picker-instructions"),"\nelement."),G({id:"Base"},"Base"),(0,o.createElement)(l.A,null,(0,a.NO)(j)),U({id:"States"},"States"),Z({id:"Summary-Error"},"Summary Error"),(0,o.createElement)(l.A,null,(0,a.NO)(M,"summary-error")),Z({id:"Open-default-tab-selected"},"Open, default tab selected"),(0,o.createElement)(l.A,null,(0,a.NO)(M,"color-picker-open")),Z({id:"Open-custom-tab-selected"},"Open, custom tab selected"),(0,o.createElement)(l.A,null,(0,a.NO)(M,"custom-tab-selected")),Z({id:"Open-custom-tab-selected-error-state"},"Open, custom tab selected, error state"),(0,o.createElement)(l.A,null,(0,a.NO)(M,"custom-tab-selected-error")),G({id:"Custom-Only"},"Custom Only"),J({},"The Custom-Only variant should only render the custom color selection tool in the Color Picker popover. It should not be inside a tabset."),(0,o.createElement)(l.A,null,(0,a.NO)(B)),U({id:"States-2"},"States"),Z({id:"Open"},"Open"),(0,o.createElement)(l.A,null,(0,a.NO)(F,"custom-color-picker-open")),Z({id:"Open-with-Error"},"Open with Error"),(0,o.createElement)(l.A,null,(0,a.NO)(F,"custom-color-picker-open-error")),G({id:"Predefined-Only"},"Predefined Only"),J({},"The Predefined Only variant should only render the predefined colors selection in the Color Picker popover. It should not be inside a tabset."),(0,o.createElement)(l.A,null,(0,a.NO)(H)),U({id:"States-3"},"States"),Z({id:"Open-2"},"Open"),(0,o.createElement)(l.A,null,(0,a.NO)(D,"predefined-color-picker-open")),G({id:"Swatches-Only"},"Swatches Only"),J({},"The Swatches Only variant should only render a group of individual swatches. It should not render any of the main chrome of the color picker UI (no Summary section, no Popover, no Tabset), it should only render the Color Picker swatches selector. This component should be rendered inside a menu."),(0,o.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,o.createElement)("p",null,"The accessibility requirements for this Variant are slightly different from the others:"),(0,o.createElement)("ul",{className:"slds-list_dotted"},(0,o.createElement)("li",null,(0,o.createElement)("code",null,".slds-color-picker__swatches")," ",(0,o.createElement)("em",null,"needs")," a ",(0,o.createElement)("code",null,"role")," of ",(0,o.createElement)("code",null,"menu"),"."),(0,o.createElement)("li",null,(0,o.createElement)("code",null,".slds-color-picker__swatch-trigger")," ",(0,o.createElement)("em",null,"needs")," a ",(0,o.createElement)("code",null,"role")," of ",(0,o.createElement)("code",null,"option")))),(0,o.createElement)(l.A,null,(0,a.NO)(X)),U({id:"States-4"},"States"),Z({id:"Open-3"},"Open"),(0,o.createElement)(l.A,null,(0,a.NO)(q,"open-swatches-only-color-picker")),G({id:"Implementation-Guidelines"},"Implementation Guidelines"),J({},"The Color Picker is a dynamic component with several 'live' areas. These areas need to update when certain user interactions occur."),U({id:"Terms"},"Terms"),J({},"Several terms are used in this document, each with particular meaning. Please take note of the following:"),$({},K({},V({},W({},"Need/s"))," This rule must be implemented for the component to appear or function as expected."),K({},V({},W({},"Current color"))," The current selected, submitted, and validated color."),K({},V({},W({},"Working color"))," The working, unsubmitted color, built with the custom-range tool.")),U({id:"Functionality"},"Functionality"),J({},"When creating an implementation of this UI component, please take note to include the following functionality:"),J({},W({},".slds-color-picker__button")),J({},"Aside from the 'swatches-only' variant, all Color Picker variants have a summary section with a clickable button. This button ",V({},"needs")," to toggle the visibility of the ",L({},".slds-color-picker__selector")," popover."),J({},W({},".slds-color-picker__button .slds-swatch")),J({},"This swatch ",V({},"needs")," an inline style of ",L({},"background"),", set to the ",V({},"current color"),". It ",V({},"needs")," to update whenever the ",V({},"current color")," is updated."),J({},W({},".slds-color-picker__summary-input")),J({},"This input ",V({},"needs")," to display the hex value of the ",V({},"current color"),". It should update whenever ",V({},"current color")," is updated. The user can enter a hex color manually. The implementation should check for the validity of the submitted value before setting the color to be the ",V({},"current color"),"."),J({},W({},".slds-color-picker__hue-slider")),J({},"In the custom picker, the hue slider is a range input element that allows the user to select a hue base for a ",V({},"working color"),". Its value ranges from 0 - 360, and represents the hue in an expected hsv color format."),J({},"When the user updates the ",V({},"current color"),", the value on this slider ",V({},"needs")," to be adjusted to the ",V({},"current color"),"'s hue."),J({},W({},".slds-color-picker__custom-range")),J({},"The custom range represents a matrix of all saturation and brightness combinations of the ",V({},"working color"),"'s hue. The x axis of the form represents saturation, and goes from 0% to 100%. On the y axis, brightness is represented, with 0% brightness at the bottom, and 100% brightness at the top."),J({},"Keep in mind that when implementing color conversions, this custom range picker is utilizing the HSB/HSV color model, and not the HSL model."),J({},"This element ",V({},"needs")," an inline style, with the ",L({},"background")," property set to the ",V({},"working color"),"'s hue, as defined by the hue range input element described above. As this element is meant to represent the current ",V({},"working color"),"'s hue's saturation and lightness matrix, css's hsl() syntax is the most appropriate format here, with the hue being the current ",V({},"working color"),"'s hue, the saturation set to 100% and the lightness set to 50% (the 50% lightness is to adjust this HSL range for the HSB color model)."),J({},"A gradient overlay will produce the effect of the saturation and brightness matrix automatically."),J({},"Any mouse clicks on the custom range ",V({},"need")," to set the position of the ",L({},".slds-color-picker__range-indicator")," to the clicked coordinates, and also ",V({},"need")," to update the saturation and brightness values on the working color."),J({},W({},".slds-color-picker__range-indicator")),J({},"This is the targeting element inside the custom range, and represents the current brightness and saturation values of the ",V({},"working color"),"."),J({},"It ",V({},"needs")," declarations for ",L({},"bottom")," and ",L({},"left")," positioning, so it will be properly placed over the correct area of the ",L({},".slds-color-picker__custom-range"),"."),J({},"Conveniently, the values are uniformly represented. The ",L({},"left")," declaration indicates the saturation value, from 0% to 100%, and the ",L({},"bottom")," declaration indicates the brightness value, from 0% to 100%."),J({},W({},".slds-color-picker__hue-and-preview .slds-swatch")),J({},"This swatch is a preview element of the ",V({},"working color")," value from the hue slider and range indicator above. It ",V({},"needs")," an inline style for ",L({},"background"),", set to the completed ",V({},"working color")," value."),J({},W({},".slds-color-picker__custom-inputs")),J({},"The Hex, R(ed), G(reen), and B(lue) text inputs included in this section are representative of the current ",V({},"working color"),"'s converted Hex or RGB values, and ",V({},"need")," to display those as their value."),J({},"Users can, however, directly input into these elements. A valid entry ",V({},"needs")," to update the working color and update related elements. The implementation should protect against invalid submissions."),U({id:"Keyboard-Interactions"},"Keyboard Interactions"),J({},W({},".slds-color-picker__swatches")),J({},"This element has the role of ",L({},"listbox"),", and keyboard interactions when its <a> children are focused ",V({},"needs")," to behave in a menu-like fashion. Keypresses ",V({},"need")," to move the actively focused element in the appropriate direction (left/up will move to the previous item, down/right will move to the next item)."),J({},"Additionally, when focused on the first or last item, the appropriate key action ",V({},"needs")," to move the focus to the last or first item, respectively. It is expected to behave in a cyclical fashion."),J({},W({},".slds-color-picker__range-indicator")),J({},"The range indicator, when focused, ",V({},"needs")," to respond to arrow keypresses by moving 1% in the appropriate direction, unless prohibited by a boundary."),J({},"For an additional effect, if an arrow key is pressed in combination with shift, the indicator can move 10% in the given direction, unless prohibited by a boundary."),J({},W({},"Other Interactions")),J({},"Other expected keyboard interactions (such as input field updates) and their effects on UI can be found in the Implementation Guidelines section above."))},Q=function(){return(0,s.Qr)(z())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},n={};function s(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={id:e,exports:{}};return o[e](r,r.exports,s),r.exports}s.m=o,s.amdO={},e=[],s.O=function(t,r,o,n){if(!r){var l=1/0;for(d=0;d<e.length;d++){r=e[d][0],o=e[d][1],n=e[d][2];for(var i=!0,a=0;a<r.length;a++)1&n&&!(l>=n)\|\|!Object.keys(s.O).every(function(e){return s.O[e](r[a])})?(i=!1,n<l&&(l=n)):r.splice(a--,1);if(i){e.splice(d--,1);var c=o();void 0!==c&&(t=c)}}return t}n=n\|\|0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[r,o,n]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},s.cw=function(e){var t;return function(){if(e){var r=e;e=0,t={exports:{}},r.call(t.exports,t,t.exports)}return t.exports}},r=Object.getPrototypeOf,s.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var n=Object.create(null);s.r(n);var l={};t=t\|\|[null,r({}),r([]),r(r)];for(var i=2&o&&e;("object"==typeof i\|\|"function"==typeof i)&&!~t.indexOf(i);i=r(i))Object.getOwnPropertyNames(i).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},s.d(n,l),n},s.d=function(e,t){for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=7347,function(){var e={7347:0};s.O.j=function(t){return 0===e[t]};var t=function(t,r){var o,n,l=r[0],i=r[1],a=r[2],c=0;if(l.some(function(t){return 0!==e[t]})){for(o in i)s.o(i,o)&&(s.m[o]=i[o]);if(a)var d=a(s)}for(t&&t(r);c<l.length;c++)n=l[c],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(d)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),s.nc=void 0;var l=s.O(void 0,[3540],function(){return s(4226)});l=s.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/color-picker/docs.mdx.js"]=l}();
1	+ var SLDS;!function(){"use strict";var e,t,r,o={4226:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return Q},getElement:function(){return z}});var o=r(1594),n=r.n(o),s=r(5671),l=r(6547),i=(r(2436),r(9582),r(5619)),a=r(6482),c=r(1369),d=r.n(c),u=r(8347),m=r(9825),h=r(2537),p=r(5006),f=r(2711),b=r(5526);function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}function v(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,k(o.key),o)}}function k(e){var t=function(e){if("object"!=y(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=y(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==y(t)?t:t+""}function E(e,t){return E=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},E(e,t)}function w(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(w=function(){return!!e})()}function g(e){return g=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},g(e)}var _=["#e3abec","#c2dbf7","#9fd6ff","#9de7da","#9df0c0","#fff099","#fed49a","#d073e0","#86baf3","#5ebbff","#44d8be","#3be282","#ffe654","#ffb758","#bd35bd","#5779c1","#5ebbff","#00aea9","#3cba4c","#f5bc25","#f99221","#580d8c","#001970","#0a2399","#0b7477","#0b6b50","#b67e11","#b85d0d"],O="Please ensure value is correct",S=function(e){return n().createElement("span",{key:a.Ay.uniqueId("swatch-"),className:"slds-swatch",style:{background:e.color}},n().createElement("span",{className:"slds-assistive-text","aria-hidden":e.ariaHidden},e.color))},x=function(e){var t=e.hasSummaryError,r="color-picker-summary-error";return n().createElement(f.ZS,{formElementClassName:"slds-color-picker__summary",labelContent:"Choose Color",labelClassName:"slds-color-picker__summary-label",inputId:"color-picker-summary-input",hasError:t},n().createElement(m.$n,{className:"slds-color-picker__summary-button slds-button_icon slds-button_icon-more",title:"Choose Color"},n().createElement(S,{color:"hsl(220, 46%, 55%)",suppressAssistiveText:!0}),n().createElement(u.A,{className:"slds-button__icon slds-button__icon_small slds-m-left_xx-small",sprite:"utility",symbol:"down"}),n().createElement("span",{className:"slds-assistive-text"},"Choose a color. Current color: #5679C0")),n().createElement("div",{className:"slds-color-picker__summary-input"},n().createElement(b.A,{id:"color-picker-summary-input",defaultValue:"#5679C0","aria-describedby":t?r:null})),t?n().createElement("p",{className:"slds-form-error",id:r},O):null)},C=function(e){var t=e.isMenuRole,r=t?"menu":"listbox",o=t?"menuitem":"option";return n().createElement("ul",{className:"slds-color-picker__swatches",role:r,"aria-label":"Preset colors"},_.map(function(e,t){return n().createElement("li",{key:a.Ay.uniqueId("color-picker-swatch-"),className:"slds-color-picker__swatch",role:"presentation"},n().createElement("a",{className:"slds-color-picker__swatch-trigger",href:"#",role:o,tabIndex:0===t?0:-1},n().createElement(S,{color:e,index:t})))}))},T=function(e){var t=a.Ay.uniqueId("color-picker-input-range-"),r=a.Ay.uniqueId("color-picker-input-hex-"),o=a.Ay.uniqueId("color-picker-input-r-"),s=a.Ay.uniqueId("color-picker-input-g-"),l=a.Ay.uniqueId("color-picker-input-b-"),i=e.hasCustomError,c="color-picker-custom-error";return n().createElement("div",{className:"slds-color-picker__custom"},n().createElement("p",{id:"color-picker-instructions",className:"slds-assistive-text"},"Use arrow keys to select a saturation and brightness, on an x and y axis."),n().createElement("div",{className:"slds-color-picker__custom-range",style:{background:"hsl(220, 100%, 50%)"}},n().createElement("button",{className:"slds-color-picker__range-indicator",style:{bottom:"45%",left:"46%"},"aria-live":"assertive","aria-atomic":"true","aria-describedby":"color-picker-instructions"},n().createElement("span",{className:"slds-assistive-text"},"hex #5679C0"))),n().createElement("div",{className:"slds-color-picker__hue-and-preview"},n().createElement("label",{className:"slds-assistive-text",htmlFor:t},"Select Hue"),n().createElement("input",{type:"range",className:"slds-color-picker__hue-slider",min:"0",max:"360",defaultValue:"208",id:t}),n().createElement(S,{color:"#5679C0",ariaHidden:!0})),n().createElement("div",{className:"slds-color-picker__custom-inputs"},n().createElement(f.ZS,{labelContent:"Hex",formElementClassName:"slds-color-picker__input-custom-hex",hasError:i,inputId:r},n().createElement(b.A,{id:r,defaultValue:"#5679C0","aria-describedby":i?c:null})),n().createElement(f.ZS,{labelContent:n().createElement("abbr",{title:"Red"},"R"),inputId:o},n().createElement(b.A,{defaultValue:"86",id:o})),n().createElement(f.ZS,{labelContent:n().createElement("abbr",{title:"Green"},"G"),inputId:s},n().createElement(b.A,{defaultValue:"121",id:s})),n().createElement(f.ZS,{labelContent:n().createElement("abbr",{title:"blue"},"B"),inputId:l},n().createElement(b.A,{defaultValue:"192",id:l}))),i?n().createElement("p",{className:"slds-form-error",id:c},O):null)},N=function(){return n().createElement("div",{className:"slds-color-picker__selector-footer"},n().createElement(m.$n,{isNeutral:!0},"Cancel"),n().createElement(m.$n,{isBrand:!0},"Done"))},I=function(e){return n().createElement(h.A,{selectedIndex:e.selectedTabIndex},n().createElement(h.A.Item,{title:"Default",id:"color-picker-default"},n().createElement(C,null)),n().createElement(h.A.Item,{title:"Custom",id:"color-picker-custom"},n().createElement(T,{hasCustomError:e.hasCustomError})))},A=function(e){function t(e){var r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(r=function(e,t,r){return t=g(t),function(e,t){if(t&&("object"==y(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,w()?Reflect.construct(t,r\|\|[],g(e).constructor):t.apply(e,r))}(this,t)).state={selectedTabIndex:e.selectedTabIndex\|\|0},r.isFullFeatureMode=r.isFullFeatureMode.bind(r),r.isPredefinedMode=r.isPredefinedMode.bind(r),r.isCustomOnlyMode=r.isCustomOnlyMode.bind(r),r.isSwatchesOnlyMode=r.isSwatchesOnlyMode.bind(r),r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&E(e,t)}(t,e),r=t,(o=[{key:"isFullFeatureMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(!t\|\|!r)}},{key:"isPredefinedMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(!t\|\|r)}},{key:"isCustomOnlyMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(t\|\|!r)}},{key:"isSwatchesOnlyMode",value:function(){var e=this.props,t=e.hasPredefined,r=e.hasCustom;return!(t\|\|r)}},{key:"render",value:function(){var e=this.state.selectedTabIndex,t=this.props,r=t.isOpen,o=t.hasSummaryError,s=t.hasCustomError,l=r?"slds-show":"slds-hide",i=this.isSwatchesOnlyMode()?null:n().createElement(x,{hasSummaryError:o}),a=this.isSwatchesOnlyMode()?null:n().createElement(N,null),c=null;return this.isFullFeatureMode()?c=n().createElement(I,{hasCustomError:s,selectedTabIndex:e}):this.isPredefinedMode()?c=n().createElement(C,null):this.isCustomOnlyMode()?c=n().createElement(T,{hasCustomError:s}):this.isSwatchesOnlyMode()&&(c=n().createElement(I,{selectedTabIndex:e})),n().createElement("div",{className:"slds-color-picker"},i,n().createElement(p.AM,{title:"Choose a color",className:d()("slds-color-picker__selector",l),footer:a},c))}}])&&v(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),r;var r,o}(n().Component);A.defaultProps={selectedTabIndex:0,isOpen:!1,hasPredefined:!0,hasCustom:!0};var P=A,j=n().createElement(P,null),M=[{id:"summary-error",label:"Summary Error",element:n().createElement(P,{hasSummaryError:!0})},{id:"color-picker-open",label:"Open, default tab selected",element:n().createElement(P,{isOpen:!0})},{id:"custom-tab-selected",label:"Open, custom tab selected",element:n().createElement(P,{isOpen:!0,selectedTabIndex:1})},{id:"custom-tab-selected-error",label:"Open, custom tab selected, error state",element:n().createElement(P,{isOpen:!0,hasCustomError:!0,selectedTabIndex:1})}],B=n().createElement(P,{hasPredefined:!1}),F=[{id:"custom-color-picker-open",label:"Open",element:n().createElement(P,{isOpen:!0,hasPredefined:!1})},{id:"custom-color-picker-open-error",label:"Open with Error",element:n().createElement(P,{isOpen:!0,hasCustomError:!0,hasPredefined:!1})}],H=n().createElement(P,{hasCustom:!1}),D=[{id:"predefined-color-picker-open",label:"Open",element:n().createElement(P,{isOpen:!0,hasCustom:!1})}],R=r(4760),X=[{id:"default",label:"Default",element:n().createElement(R.l9,null,n().createElement("div",{className:"slds-dropdown slds-dropdown_left"},n().createElement("div",{className:"slds-color-picker slds-color-picker_swatches-only"},n().createElement("div",{className:"slds-color-picker__selector"},n().createElement(C,{isMenuRole:!0})))))}],q=[{id:"open-swatches-only-color-picker",label:"Open",element:n().createElement("div",{style:{height:"12rem"}},n().createElement(R.l9,{isOpen:!0},n().createElement("div",{className:"slds-dropdown slds-dropdown_left"},n().createElement("div",{className:"slds-color-picker slds-color-picker_swatches-only"},n().createElement("div",{className:"slds-color-picker__selector"},n().createElement(C,{isMenuRole:!0}))))))}],L=s.XB.code,V=s.XB.em,G=s.XB.h2,U=s.XB.h3,Z=s.XB.h4,K=s.XB.li,J=s.XB.p,W=s.XB.strong,$=s.XB.ul,z=function(){return(0,o.createElement)(s.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"A configurable interface for color selection"),(0,o.createElement)(l.A,{exampleOnly:!0},(0,a.NO)(M,"color-picker-open")),G({id:"About-Color-Picker"},"About Color Picker"),J({},"The Unified Color Picker component allows for a fully accessible and configurable color picker, allowing the user to pick from a set of predefined colors (swatches), or to pick a custom color using a HSB selection interface."),J({},"It can be configured to show one or both of those color selection interfaces."),J({},"The Unified Color Picker component allows for a fully accessible and configurable\ncolor picker, allowing the user to pick from a set of predefined colors\n(swatches), or to pick a custom color using a HSB selection interface."),J({},"It can be configured to show one or both of those color selection interfaces."),U({id:"Accessibility"},"Accessibility"),J({},"This component makes use of other components, such as Popovers, Tabs, and Input.\nAll accessibility rules and guidelines for those components ",V({},"need")," to be followed\nfor proper accessibility support."),J({},"As this is a highly interactive component, there are some key accessibility\nguidelines that must be followed for specific elements:"),J({},W({},".slds-color-picker__summary-label")),J({},"This element ",V({},"needs")," a for attribute with the value of the\n",L({},".slds-color-picker__summary-input"),"'s ID"),J({},W({},".slds-color-picker__swatches")),J({},"This element ",V({},"needs")," a ",L({},"role")," of ",L({},"listbox"),"."),J({},W({},".slds-color-picker__swatch")),J({},"This element ",V({},"needs")," a ",L({},"role")," of ",L({},"presentation"),"."),J({},W({},".slds-color-picker__swatch-trigger")),J({},"This element ",V({},"needs")," a ",L({},"role")," of ",L({},"option"),"."),J({},W({},".slds-color-picker__range-indicator")),J({},"Since this element is focused and moved to indicate the ",V({},"working color")," it ",V({},"needs"),"\nproper aria tags to indicate its job and value. First, an ",L({},"aria-live")," attribute\n",V({},"needs")," to be set to ",L({},"assertive"),", ",L({},"aria-atomic")," ",V({},"needs")," to be set to ",L({},"true"),", and\n",L({},"aria-describedby")," needs to reference the instructions text for the custom color\npicker range, which in our example is the hidden ",L({},"#color-picker-instructions"),"\nelement."),G({id:"Base"},"Base"),(0,o.createElement)(l.A,null,(0,a.NO)(j)),U({id:"States"},"States"),Z({id:"Summary-Error"},"Summary Error"),(0,o.createElement)(l.A,null,(0,a.NO)(M,"summary-error")),Z({id:"Open-default-tab-selected"},"Open, default tab selected"),(0,o.createElement)(l.A,null,(0,a.NO)(M,"color-picker-open")),Z({id:"Open-custom-tab-selected"},"Open, custom tab selected"),(0,o.createElement)(l.A,null,(0,a.NO)(M,"custom-tab-selected")),Z({id:"Open-custom-tab-selected-error-state"},"Open, custom tab selected, error state"),(0,o.createElement)(l.A,null,(0,a.NO)(M,"custom-tab-selected-error")),G({id:"Custom-Only"},"Custom Only"),J({},"The Custom-Only variant should only render the custom color selection tool in the Color Picker popover. It should not be inside a tabset."),(0,o.createElement)(l.A,null,(0,a.NO)(B)),U({id:"States-2"},"States"),Z({id:"Open"},"Open"),(0,o.createElement)(l.A,null,(0,a.NO)(F,"custom-color-picker-open")),Z({id:"Open-with-Error"},"Open with Error"),(0,o.createElement)(l.A,null,(0,a.NO)(F,"custom-color-picker-open-error")),G({id:"Predefined-Only"},"Predefined Only"),J({},"The Predefined Only variant should only render the predefined colors selection in the Color Picker popover. It should not be inside a tabset."),(0,o.createElement)(l.A,null,(0,a.NO)(H)),U({id:"States-3"},"States"),Z({id:"Open-2"},"Open"),(0,o.createElement)(l.A,null,(0,a.NO)(D,"predefined-color-picker-open")),G({id:"Swatches-Only"},"Swatches Only"),J({},"The Swatches Only variant should only render a group of individual swatches. It should not render any of the main chrome of the color picker UI (no Summary section, no Popover, no Tabset), it should only render the Color Picker swatches selector. This component should be rendered inside a menu."),(0,o.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,o.createElement)("p",null,"The accessibility requirements for this Variant are slightly different from the others:"),(0,o.createElement)("ul",{className:"slds-list_dotted"},(0,o.createElement)("li",null,(0,o.createElement)("code",null,".slds-color-picker__swatches")," ",(0,o.createElement)("em",null,"needs")," a ",(0,o.createElement)("code",null,"role")," of ",(0,o.createElement)("code",null,"menu"),"."),(0,o.createElement)("li",null,(0,o.createElement)("code",null,".slds-color-picker__swatch-trigger")," ",(0,o.createElement)("em",null,"needs")," a ",(0,o.createElement)("code",null,"role")," of ",(0,o.createElement)("code",null,"option")))),(0,o.createElement)(l.A,null,(0,a.NO)(X)),U({id:"States-4"},"States"),Z({id:"Open-3"},"Open"),(0,o.createElement)(l.A,null,(0,a.NO)(q,"open-swatches-only-color-picker")),G({id:"Implementation-Guidelines"},"Implementation Guidelines"),J({},"The Color Picker is a dynamic component with several 'live' areas. These areas need to update when certain user interactions occur."),U({id:"Terms"},"Terms"),J({},"Several terms are used in this document, each with particular meaning. Please take note of the following:"),$({},K({},V({},W({},"Need/s"))," This rule must be implemented for the component to appear or function as expected."),K({},V({},W({},"Current color"))," The current selected, submitted, and validated color."),K({},V({},W({},"Working color"))," The working, unsubmitted color, built with the custom-range tool.")),U({id:"Functionality"},"Functionality"),J({},"When creating an implementation of this UI component, please take note to include the following functionality:"),J({},W({},".slds-color-picker__button")),J({},"Aside from the 'swatches-only' variant, all Color Picker variants have a summary section with a clickable button. This button ",V({},"needs")," to toggle the visibility of the ",L({},".slds-color-picker__selector")," popover."),J({},W({},".slds-color-picker__button .slds-swatch")),J({},"This swatch ",V({},"needs")," an inline style of ",L({},"background"),", set to the ",V({},"current color"),". It ",V({},"needs")," to update whenever the ",V({},"current color")," is updated."),J({},W({},".slds-color-picker__summary-input")),J({},"This input ",V({},"needs")," to display the hex value of the ",V({},"current color"),". It should update whenever ",V({},"current color")," is updated. The user can enter a hex color manually. The implementation should check for the validity of the submitted value before setting the color to be the ",V({},"current color"),"."),J({},W({},".slds-color-picker__hue-slider")),J({},"In the custom picker, the hue slider is a range input element that allows the user to select a hue base for a ",V({},"working color"),". Its value ranges from 0 - 360, and represents the hue in an expected hsv color format."),J({},"When the user updates the ",V({},"current color"),", the value on this slider ",V({},"needs")," to be adjusted to the ",V({},"current color"),"'s hue."),J({},W({},".slds-color-picker__custom-range")),J({},"The custom range represents a matrix of all saturation and brightness combinations of the ",V({},"working color"),"'s hue. The x axis of the form represents saturation, and goes from 0% to 100%. On the y axis, brightness is represented, with 0% brightness at the bottom, and 100% brightness at the top."),J({},"Keep in mind that when implementing color conversions, this custom range picker is utilizing the HSB/HSV color model, and not the HSL model."),J({},"This element ",V({},"needs")," an inline style, with the ",L({},"background")," property set to the ",V({},"working color"),"'s hue, as defined by the hue range input element described above. As this element is meant to represent the current ",V({},"working color"),"'s hue's saturation and lightness matrix, css's hsl() syntax is the most appropriate format here, with the hue being the current ",V({},"working color"),"'s hue, the saturation set to 100% and the lightness set to 50% (the 50% lightness is to adjust this HSL range for the HSB color model)."),J({},"A gradient overlay will produce the effect of the saturation and brightness matrix automatically."),J({},"Any mouse clicks on the custom range ",V({},"need")," to set the position of the ",L({},".slds-color-picker__range-indicator")," to the clicked coordinates, and also ",V({},"need")," to update the saturation and brightness values on the working color."),J({},W({},".slds-color-picker__range-indicator")),J({},"This is the targeting element inside the custom range, and represents the current brightness and saturation values of the ",V({},"working color"),"."),J({},"It ",V({},"needs")," declarations for ",L({},"bottom")," and ",L({},"left")," positioning, so it will be properly placed over the correct area of the ",L({},".slds-color-picker__custom-range"),"."),J({},"Conveniently, the values are uniformly represented. The ",L({},"left")," declaration indicates the saturation value, from 0% to 100%, and the ",L({},"bottom")," declaration indicates the brightness value, from 0% to 100%."),J({},W({},".slds-color-picker__hue-and-preview .slds-swatch")),J({},"This swatch is a preview element of the ",V({},"working color")," value from the hue slider and range indicator above. It ",V({},"needs")," an inline style for ",L({},"background"),", set to the completed ",V({},"working color")," value."),J({},W({},".slds-color-picker__custom-inputs")),J({},"The Hex, R(ed), G(reen), and B(lue) text inputs included in this section are representative of the current ",V({},"working color"),"'s converted Hex or RGB values, and ",V({},"need")," to display those as their value."),J({},"Users can, however, directly input into these elements. A valid entry ",V({},"needs")," to update the working color and update related elements. The implementation should protect against invalid submissions."),U({id:"Keyboard-Interactions"},"Keyboard Interactions"),J({},W({},".slds-color-picker__swatches")),J({},"This element has the role of ",L({},"listbox"),", and keyboard interactions when its <a> children are focused ",V({},"needs")," to behave in a menu-like fashion. Keypresses ",V({},"need")," to move the actively focused element in the appropriate direction (left/up will move to the previous item, down/right will move to the next item)."),J({},"Additionally, when focused on the first or last item, the appropriate key action ",V({},"needs")," to move the focus to the last or first item, respectively. It is expected to behave in a cyclical fashion."),J({},W({},".slds-color-picker__range-indicator")),J({},"The range indicator, when focused, ",V({},"needs")," to respond to arrow keypresses by moving 1% in the appropriate direction, unless prohibited by a boundary."),J({},"For an additional effect, if an arrow key is pressed in combination with shift, the indicator can move 10% in the given direction, unless prohibited by a boundary."),J({},W({},"Other Interactions")),J({},"Other expected keyboard interactions (such as input field updates) and their effects on UI can be found in the Implementation Guidelines section above."))},Q=function(){return(0,s.Qr)(z())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},n={};function s(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={id:e,exports:{}};return o[e](r,r.exports,s),r.exports}s.m=o,s.amdO={},e=[],s.O=function(t,r,o){if(!r){for(var n=0;n<e.length;n++){r=e[n][0],o=e[n][1];for(var l=!0,i=0;i<r.length;i++)s.O.j(r[i])?r.splice(i--,1):l=!1;if(l){e.splice(n--,1);var a=o();void 0!==a&&(t=a)}}return t}e.push([r,o])},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},s.cw=function(e){var t;return function(){if(e){var r=e;e=0,t={exports:{}},r.call(t.exports,t,t.exports)}return t.exports}},r=Object.getPrototypeOf,s.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var n=Object.create(null);s.r(n);var l={};t=t\|\|[null,r({}),r([]),r(r)];for(var i=2&o&&e;("object"==typeof i\|\|"function"==typeof i)&&!~t.indexOf(i);i=r(i))Object.getOwnPropertyNames(i).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},s.d(n,l),n},s.d=function(e,t){for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=7347,function(){var e={7347:0};s.O.j=function(t){return 0===e[t]};var t=function(t,r){var o,n,l=r[0],i=r[1],a=r[2],c=0;if(l.some(function(t){return 0!==e[t]})){for(o in i)s.o(i,o)&&(s.m[o]=i[o]);if(a)var d=a(s)}for(t&&t(r);c<l.length;c++)n=l[c],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(d)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),s.nc=void 0;var l=s.O(void 0,[3540],function(){return s(4226)});l=s.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/color-picker/docs.mdx.js"]=l}();