Content Box <tc:box>

<?xml version="1.0" encoding="UTF-8"?>

<!--
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
-->

<ui:composition template="/main.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:tc="http://myfaces.apache.org/tobago/component"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html">
  <ui:param name="title" value="#{demoBundle.box} &lt;tc:box>"/>
  <p>A content box is created with <code class="language-markup">&lt;tc:box/></code>.</p>
  <tc:link label="Tag Library Documentation" image="#{request.contextPath}/image/feather-leaf.png"
           link="#{demoBundle.tagDocUrl}/#{apiController.currentRelease}/tld/tc/box.html"/>
  <tc:section label="Basics">
    <p>The title of the box is set by the <code>label</code> attribute or with
      <code class="language-markup">&lt;f:facet name="label"></code>.</p>
    <pre><code class="language-markup">&lt;tc:box label="Box">Content&lt;/tc:box></code></pre>
    <tc:box id="labelAttrBox" label="Box">
      Title set by <code>label</code> attribute.
    </tc:box>
    <tc:box id="labelFacetBox">
      <f:facet name="label">
        <h:outputText value="#{outController.html}" escape="false"/>
      </f:facet>
      Title set by <code class="language-markup">&lt;f:facet name="label"></code>.
    </tc:box>
    <tc:box id="noTitleBox">Contentbox without a title.</tc:box>
    <tc:box label="Scrollable box">
      <tc:style customClass="scrollableBox"/>
      <tc:style overflowY="scroll" height="100px" selector=".scrollableBox .card-body"/>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan libero orci, vel lacinia nibh
        tincidunt nec. Praesent in euismod eros. Phasellus suscipit purus nisl, et posuere dolor iaculis at. Vivamus
        fringilla risus tellus, at sollicitudin nunc egestas at. Nullam hendrerit augue id nibh pharetra maximus.
        Vivamus eu turpis ut ligula euismod accumsan et eget lectus. Aenean ornare elit nisl, vitae bibendum dolor
        egestas varius. Fusce euismod leo at tristique auctor. Donec eget luctus dui.</p>
    </tc:box>
  </tc:section>

  <tc:section label="Collapse/Expand">
    <p>A contentbox can be collapsed or expanded via the <code>collapsed</code> attribute.
      To define the behavior of hidden content, use the <code>collapseMode</code> attribute.
      For more information have a look at the
      <tc:link label="#{demoBundle.collapsible_box}"
               outcome="/content/30-concept/53-collapsible/00-collapsible-box/collapsible-box.xhtml"/> page
      in the <tc:link label="#{demoBundle.collapsible}"
                      outcome="/content/30-concept/53-collapsible/collapsible.xhtml"/> section.</p>
  </tc:section>

  <tc:section label="Bar">
    <p>It's possible to add a bar to the header of a content box. For that, the content box must contain the tag
      <code class="language-markup">&lt;f:facet name="bar"></code>. The facet may contain
      <code class="language-markup">&lt;tc:bar></code> or other suitable tags.</p>
    <tc:box label="Title">
      <f:facet name="bar">
        <tc:bar>
          <tc:buttons>
            <tc:button label="Left"/>
            <tc:button label="Right"/>
          </tc:buttons>
        </tc:bar>
      </f:facet>
      Box with <code class="language-markup">&lt;f:facet name="bar"></code>.
    </tc:box>
  </tc:section>

  <tc:section label="Box in a box">
    <tc:box label="Box 1">
      <tc:box label="Box 2">
        <p>content</p>
      </tc:box>
    </tc:box>
  </tc:section>

  <tc:section label="Accordion">
    <p>This example show collapsible/expandable boxes using the label facet.</p>
    <p>Expanding/collapsing the first box, a full server request is executed.
      The other two boxes are reloaded with an ajax request.</p>
    <p>In the collapsed form the last box only hide the content with CSS.
      The boxes 'Box 1' and 'Box 2' don't render the content at all.</p>
    <p>See <tc:link label="Collapsible Concept" outcome="/content/30-concept/53-collapsible/collapsible.xhtml"/>
      for more information about the collapsible concept.</p>
    <tc:box id="accordionBox1" collapsedMode="absent" collapsed="#{boxController.box1collapsed}">
      <f:facet name="label">
        <tc:link id="showBox1" label="Box 1" rendered="#{boxController.box1collapsed}">
          <tc:operation for="accordionBox1" name="show"/>
        </tc:link>
        <tc:link id="hideBox1" label="Box 1" rendered="#{!boxController.box1collapsed}">
          <tc:operation for="accordionBox1" name="hide"/>
        </tc:link>
      </f:facet>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </tc:box>
    <tc:box id="accordionBox2" collapsedMode="absent" collapsed="#{boxController.box2collapsed}">
      <f:facet name="label">
        <tc:link id="showBox2" label="Box 2" rendered="#{boxController.box2collapsed}">
          <tc:operation for="accordionBox2" name="show"/>
          <f:ajax execute="accordionBox2" render="accordionBox2"/>
        </tc:link>
        <tc:link id="hideBox2" label="Box 2" rendered="#{!boxController.box2collapsed}">
          <tc:operation for="accordionBox2" name="hide"/>
          <f:ajax execute="accordionBox2" render="accordionBox2"/>
        </tc:link>
      </f:facet>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </tc:box>
    <tc:box id="accordionBox3" collapsedMode="hidden" collapsed="#{boxController.box3collapsed}">
      <f:facet name="label">
        <tc:link id="showBox3" label="Box 3" rendered="#{boxController.box3collapsed}">
          <tc:operation for="accordionBox3" name="show"/>
          <f:ajax execute="accordionBox3" render="accordionBox3"/>
        </tc:link>
        <tc:link id="hideBox3" label="Box 3" rendered="#{!boxController.box3collapsed}">
          <tc:operation for="accordionBox3" name="hide"/>
          <f:ajax execute="accordionBox3" render="accordionBox3"/>
        </tc:link>
      </f:facet>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </tc:box>
  </tc:section>
</ui:composition>